diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index 175dcf2285..16f6aa5925 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -324,8 +324,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-overflow-scrolling: touch; }
+  -webkit-tap-highlight-color: transparent; }
 
 .view {
   position: fixed;
@@ -334,25 +333,22 @@ body {
   width: 100%;
   height: 100%; }
 
-.content {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto; }
-
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
    Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
 .content > * {
   -webkit-transform: translateZ(0px);
   transform: translateZ(0px); }
 
-.has-header {
-  top: 44px; }
+.content-wrapper {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
 
-.has-footer {
-  bottom: 44px; }
+.has-header {
+  margin-top: 44px; }
 
 .has-tabs {
   bottom: 49px; }
@@ -375,7 +371,7 @@ body {
   .platform-ios7 .bar > * {
     margin-top: 20px; }
 .platform-ios7 .has-header {
-  top: 64px; }
+  margin-top: 64px; }
 
 .padded {
   padding: 10px; }
@@ -1111,7 +1107,7 @@ address {
   line-height: 1.42857; }
 
 .bar {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   z-index: 10;
@@ -1134,35 +1130,35 @@ address {
   .bar.bar-footer {
     border-top-width: 1px; }
   .bar.bar-default {
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.9);
     border-color: #dddddd;
     color: #333333; }
   .bar.bar-secondary {
-    background-color: whitesmoke;
+    background-color: rgba(245, 245, 245, 0.9);
     border-color: #bbbbbb;
     color: #333333; }
   .bar.bar-primary {
-    background-color: #4a87ee;
+    background-color: rgba(74, 135, 238, 0.9);
     border-color: #3b6dc2;
     color: white; }
   .bar.bar-info {
-    background-color: #43cee6;
+    background-color: rgba(67, 206, 230, 0.9);
     border-color: #3bb3c8;
     color: white; }
   .bar.bar-success {
-    background-color: #66cc33;
+    background-color: rgba(102, 204, 51, 0.9);
     border-color: #5bb22f;
     color: white; }
   .bar.bar-warning {
-    background-color: #f0b840;
+    background-color: rgba(240, 184, 64, 0.9);
     border-color: #d29f31;
     color: white; }
   .bar.bar-danger {
-    background-color: #ef4e3a;
+    background-color: rgba(239, 78, 58, 0.9);
     border-color: #c73927;
     color: white; }
   .bar.bar-dark {
-    background-color: #444444;
+    background-color: rgba(68, 68, 68, 0.9);
     border-color: #111111;
     color: white; }
   .bar .title {
@@ -2233,6 +2229,36 @@ a.button {
 .alert-info h4 {
   color: #3a87ad; }
 
+.card {
+  width: 100%;
+  background-color: white;
+  border-radius: 2px;
+  border: 1px solid #dddddd; }
+
+.card-header {
+  padding: 10px;
+  background-color: white; }
+  .card-header.card-header-secondary {
+    background-color: whitesmoke; }
+  .card-header.card-header-primary {
+    background-color: #4a87ee; }
+  .card-header.card-header-info {
+    background-color: #43cee6; }
+  .card-header.card-header-success {
+    background-color: #66cc33; }
+  .card-header.card-header-warning {
+    background-color: #f0b840; }
+  .card-header.card-header-danger {
+    background-color: #ef4e3a; }
+  .card-header.card-header-dark {
+    background-color: #444444; }
+
+.card-body {
+  padding: 10px; }
+
+.card-footer {
+  padding: 10px; }
+
 /*
 .slide-in-up.enter {
   -webkit-transform: translate3d(0, 100%, 0);
diff --git a/dist/ionic.css b/dist/ionic.css
index 0c7d8cf8e9..bea9b8aecd 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -389,8 +389,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-overflow-scrolling: touch; }
+  -webkit-tap-highlight-color: transparent; }
 
 .view {
   position: fixed;
@@ -399,25 +398,22 @@ body {
   width: 100%;
   height: 100%; }
 
-.content {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto; }
-
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
    Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
 .content > * {
   -webkit-transform: translateZ(0px);
   transform: translateZ(0px); }
 
-.has-header {
-  top: 44px; }
+.content-wrapper {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
 
-.has-footer {
-  bottom: 44px; }
+.has-header {
+  margin-top: 44px; }
 
 .has-tabs {
   bottom: 49px; }
@@ -1169,7 +1165,7 @@ address {
   line-height: 1.42857; }
 
 .bar {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   z-index: 10;
@@ -1192,35 +1188,35 @@ address {
   .bar.bar-footer {
     border-top-width: 1px; }
   .bar.bar-default {
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.9);
     border-color: #dddddd;
     color: #333333; }
   .bar.bar-secondary {
-    background-color: whitesmoke;
+    background-color: rgba(245, 245, 245, 0.9);
     border-color: #bbbbbb;
     color: #333333; }
   .bar.bar-primary {
-    background-color: #4a87ee;
+    background-color: rgba(74, 135, 238, 0.9);
     border-color: #3b6dc2;
     color: white; }
   .bar.bar-info {
-    background-color: #43cee6;
+    background-color: rgba(67, 206, 230, 0.9);
     border-color: #3bb3c8;
     color: white; }
   .bar.bar-success {
-    background-color: #66cc33;
+    background-color: rgba(102, 204, 51, 0.9);
     border-color: #5bb22f;
     color: white; }
   .bar.bar-warning {
-    background-color: #f0b840;
+    background-color: rgba(240, 184, 64, 0.9);
     border-color: #d29f31;
     color: white; }
   .bar.bar-danger {
-    background-color: #ef4e3a;
+    background-color: rgba(239, 78, 58, 0.9);
     border-color: #c73927;
     color: white; }
   .bar.bar-dark {
-    background-color: #444444;
+    background-color: rgba(68, 68, 68, 0.9);
     border-color: #111111;
     color: white; }
   .bar .title {
@@ -2278,6 +2274,36 @@ a.button {
 .alert-info h4 {
   color: #3a87ad; }
 
+.card {
+  width: 100%;
+  background-color: white;
+  border-radius: 2px;
+  border: 1px solid #dddddd; }
+
+.card-header {
+  padding: 10px;
+  background-color: white; }
+  .card-header.card-header-secondary {
+    background-color: whitesmoke; }
+  .card-header.card-header-primary {
+    background-color: #4a87ee; }
+  .card-header.card-header-info {
+    background-color: #43cee6; }
+  .card-header.card-header-success {
+    background-color: #66cc33; }
+  .card-header.card-header-warning {
+    background-color: #f0b840; }
+  .card-header.card-header-danger {
+    background-color: #ef4e3a; }
+  .card-header.card-header-dark {
+    background-color: #444444; }
+
+.card-body {
+  padding: 10px; }
+
+.card-footer {
+  padding: 10px; }
+
 /*
 .slide-in-up.enter {
   -webkit-transform: translate3d(0, 100%, 0);
@@ -2308,4 +2334,4 @@ a.button {
   .platform-ios7 .bar > * {
     margin-top: 20px; }
 .platform-ios7 .has-header {
-  top: 64px; }
+  margin-top: 64px; }
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 2afcf92015..28a436cd0d 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -1,5 +1,5 @@
 .bar {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   z-index: 10;
diff --git a/scss/ionic/_card.scss b/scss/ionic/_card.scss
index e69de29bb2..d1eebb6231 100644
--- a/scss/ionic/_card.scss
+++ b/scss/ionic/_card.scss
@@ -0,0 +1,27 @@
+.card {
+  width: 100%;
+  background-color: white;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+}
+
+.card-header {
+  padding: 10px;
+  background-color: $brand-default;
+
+  &.card-header-secondary { background-color: $brand-secondary; }
+  &.card-header-primary { background-color: $brand-primary; }
+  &.card-header-info { background-color: $brand-info; }
+  &.card-header-success { background-color: $brand-success; }
+  &.card-header-warning { background-color: $brand-warning; }
+  &.card-header-danger { background-color: $brand-danger; }
+  &.card-header-dark { background-color: $brand-dark; }
+}
+
+.card-body {
+  padding: 10px;
+}
+
+.card-footer {
+  padding: 10px;
+}
diff --git a/scss/ionic/_platform.scss b/scss/ionic/_platform.scss
index 96938c464d..c976dc3abe 100644
--- a/scss/ionic/_platform.scss
+++ b/scss/ionic/_platform.scss
@@ -8,7 +8,7 @@
   }
 
   .has-header {
-    top: 64px;
+    margin-top: 64px;
   }
 }
 
diff --git a/scss/ionic/_scaffolding.scss b/scss/ionic/_scaffolding.scss
index 13f84e6842..7db9f3021f 100644
--- a/scss/ionic/_scaffolding.scss
+++ b/scss/ionic/_scaffolding.scss
@@ -23,7 +23,6 @@ body {
   -webkit-text-size-adjust: none;
           text-size-adjust: none;
   -webkit-tap-highlight-color: transparent;
-  -webkit-overflow-scrolling: touch;
 }
 
 .view {
@@ -35,12 +34,6 @@ body {
 }
 
 .content {
-  position: fixed; 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
 }
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
    Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
@@ -49,14 +42,25 @@ body {
           transform: translateZ(0px);
 }
 
+.content-wrapper {
+  position: absolute; 
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .has-header {
-  top: $bar-height;
+  //top: $bar-height;
+  margin-top: $bar-height;
 }
 
 .has-footer {
-  bottom: $bar-height;
+  //bottom: $bar-height;
+  //margin-bottom: $bar-height;
 }
 
 // Specify that a content area will have tabs
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 44554ba1b0..37365711a8 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -260,29 +260,30 @@ $bar-padding-landscape:          5px;
 
 $bar-bg:                      #fff;
 
+$bar-transparency: 0.9;
 // Bar variations
-$bar-default-bg:              $brand-default;
+$bar-default-bg:              rgba($brand-default, $bar-transparency);
 $bar-default-border-color:    #ddd;
 
-$bar-secondary-bg:            $brand-secondary;
+$bar-secondary-bg:            rgba($brand-secondary, $bar-transparency);
 $bar-secondary-border-color:  $button-secondary-border;
 
-$bar-primary-bg:              $brand-primary;
+$bar-primary-bg:              rgba($brand-primary, $bar-transparency);
 $bar-primary-border-color:    $button-primary-border;
 
-$bar-info-bg:                 $brand-info;
+$bar-info-bg:                 rgba($brand-info, $bar-transparency);
 $bar-info-border-color:       $button-info-border;
 
-$bar-success-bg:              $brand-success;
+$bar-success-bg:              rgba($brand-success, $bar-transparency);
 $bar-success-border-color:    $button-success-border;
 
-$bar-warning-bg:              $brand-warning;
+$bar-warning-bg:              rgba($brand-warning, $bar-transparency);
 $bar-warning-border-color:    $button-warning-border;
 
-$bar-danger-bg:               $brand-danger;
+$bar-danger-bg:               rgba($brand-danger, $bar-transparency);
 $bar-danger-border-color:     $button-danger-border;
 
-$bar-dark-bg:                 $brand-dark;
+$bar-dark-bg:                 rgba($brand-dark, $bar-transparency);
 $bar-dark-border-color:       $button-dark-border;
 
 
diff --git a/test/scroll.html b/test/scroll.html
index 996d156498..5a85c779e3 100644
--- a/test/scroll.html
+++ b/test/scroll.html
@@ -15,18 +15,29 @@
         <h1 class="title">World Clock</h1>
         <a href="#" class="button button-danger button-clear">Delete</a>
       </div>
-      <div class="content">
-        <div style="width: 100%; background-color: #ccc; height: 2000px"></div>
+      <div class="content-wrapper">
+        <div class="content has-header has-footer">
+          <div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padded">
+            <div class="card">
+              <div class="card-header card-header-secondary">
+                Your update
+              </div>
+              <div class="card-body">
+                <i>Just doing my thing</i>
+              </div>
+              <div class="card-footer">
+                Good bye
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </section>
-    <section id="page2">
-      <div class="bar bar-header bar-success">
-        <a href="#" class="button button-danger button-clear">Edit</a>
-        <h1 class="title">World Clock</h1>
-        <a href="#" class="button button-danger button-clear">Delete</a>
-      </div>
-      <div class="content">
-        <div style="width: 100%; background-color: #ccc; height: 2000px"></div>
+      <div class="bar bar-footer bar-secondary">
+        <div class="button-bar">
+          <a href="#" class="button button-danger button-clear">Edit</a>
+          <a href="#" class="button button-danger button-clear">Move</a>
+          <a href="#" class="button button-danger button-clear">Delete</a>
+        </div>
       </div>
     </section>
   </body>
diff --git a/test/tree_bark.png b/test/tree_bark.png
new file mode 100644
index 0000000000..5efc869ba1
Binary files /dev/null and b/test/tree_bark.png differ