fix(refresher): get rid of flickers except on droid-4.4

Fixes #1014.
ionic-team · Apr 3, 2014 · ad67184 · ad67184
1 parent feffc99
commit ad67184
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 63 deletions.
diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html
@@ -11,54 +11,16 @@
   </head>
 
   <body>
-
-    <ion-header-bar class="bar-positive" ng-class="{'bar-subheader': $root.isSub}">
-      <h1 class="title">Header!</h1>
-    </ion-header-bar>
-
-    <ion-content scroll="true" ng-controller="ContentCtrl" padding="false">
-
-    <pre>
-    $hasHeader: {{!!$hasHeader}}
-    $hasSubheader: {{!!$hasSubheader}}
-    </pre>
+    <ion-content ng-controller="ContentCtrl" padding="false">
 
       <ion-refresher on-refresh="onRefresh()" pulling-text="pull!" refreshing-text="refreshing!"></ion-refresher>
 
-      <ion-checkbox ng-model="$root.isSub">isSub</ion-checkbox>
-
-      <ul class="list">
-        <li class="item">This ion-list should *exactly* fit</li>
-        <li class="item">between header and footer (no gap),</li>
-        <li class="item">even with pull-to-refresh.</li>
-        <li class="item">4</li>
-        <li class="item">5</li>
-        <li class="item">6</li>
-        <li class="item">7</li>
-        <li class="item">8</li>
-        <li class="item">9</li>
-        <li class="item">10</li>
-        <li class="item">11</li>
-        <li class="item">12</li>
-        <li class="item">13</li>
-        <li class="item">14</li>
-        <li class="item">15</li>
-        <li class="item">16</li>
-        <li class="item">17</li>
-        <li class="item">18</li>
-        <li class="item">19</li>
-        <li class="item">20</li>
-        <li class="item">21</li>
-        <li class="item">22</li>
-        <li class="item">23</li>
-        <li class="item">24</li>
-        <li class="item">25</li>
-        <li class="item">26</li>
-        <li ng-repeat="i in more">more {{$index}}</li>
-       </ul>
-
-       <ion-infinite-scroll on-infinite="addMore()"></ion-infinite-scroll>
-
+      <p>...</p><br/><br/><br/>
+      <p>...</p><br/><br/><br/>
+      <p>...</p><br/><br/><br/>
+      <p>...</p><br/><br/><br/>
+      <p>...</p><br/><br/><br/>
+      <p>...</p><br/><br/><br/>
     </ion-content>
 
     <ion-footer-bar class="bar-assertive">

diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
@@ -139,23 +139,23 @@ body.grade-c {
 }
 
 @keyframes refresh-spin {
-  0% { transform: rotate(0); }
-  100% { transform: rotate(-180deg); }
+  0% { transform: translate3d(0,0,0) rotate(0); }
+  100% { transform: translate3d(0,0,0) rotate(-180deg); }
 }
 
 @-webkit-keyframes refresh-spin {
-  0% {-webkit-transform: rotate(0); }
-  100% {-webkit-transform: rotate(-180deg); }
+  0% {-webkit-transform: translate3d(0,0,0) rotate(0); }
+  100% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
 }
 
 @keyframes refresh-spin-back {
-  0% { transform: rotate(-180deg); }
-  100% { transform: rotate(0); }
+  0% { transform: translate3d(0,0,0) rotate(-180deg); }
+  100% { transform: translate3d(0,0,0) rotate(0); }
 }
 
 @-webkit-keyframes refresh-spin-back {
-  0% {-webkit-transform: rotate(-180deg); }
-  100% {-webkit-transform: rotate(0); }
+  0% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
+  100% {-webkit-transform: translate3d(0,0,0) rotate(0); }
 }
 
 // Scroll refresher (for pull to refresh)
@@ -185,11 +185,21 @@ body.grade-c {
     }
   }
 
+  .icon-refreshing,
+  .icon-pulling {
+    width: 100%;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+  }
   .icon-pulling {
+    -webkit-transform: translate3d(0,0,0) rotate(0deg);
+    transform: translate3d(0,0,0) rotate(0deg);
     @include animation-name(refresh-spin-back);
     @include animation-duration(200ms);
     @include animation-timing-function(linear);
-    @include animation-fill-mode(both);
+    @include animation-fill-mode(none);
   }
   .icon-refreshing,
   .text-refreshing {
@@ -200,18 +210,11 @@ body.grade-c {
   }
 
   &.active {
-    .icon-pulling,
-    .text-pulling {
-      display: block;
-    }
     .icon-pulling {
       @include animation-name(refresh-spin);
+      -webkit-transform: translate3d(0,0,0) rotate(-180deg);
+      transform: translate3d(0,0,0) rotate(-180deg);
     }
-    .icon-refreshing,
-    .text-refreshing {
-      display: none;
-    }
-
     &.refreshing {
       .icon-pulling,
       .text-pulling {