From ad67184800a22a8d27e3859298cc3f7e83b2a25c Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Thu, 3 Apr 2014 11:28:25 -0600 Subject: [PATCH] fix(refresher): get rid of flickers except on droid-4.4 Fixes #1014. --- js/ext/angular/test/list-fit.html | 52 +++++-------------------------- scss/_scaffolding.scss | 39 ++++++++++++----------- 2 files changed, 28 insertions(+), 63 deletions(-) diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html index 53aa56221da..0fb3ef33404 100644 --- a/js/ext/angular/test/list-fit.html +++ b/js/ext/angular/test/list-fit.html @@ -11,54 +11,16 @@ - - -

Header!

- - - - - 
-    $hasHeader: {{!!$hasHeader}}
-    $hasSubheader: {{!!$hasSubheader}}
-
+ - isSub - -
    -
  • This ion-list should *exactly* fit
    • -
  • between header and footer (no gap),
    • -
  • even with pull-to-refresh.
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
  • 7
    • -
  • 8
    • -
  • 9
    • -
  • 10
    • -
  • 11
    • -
  • 12
    • -
  • 13
    • -
  • 14
    • -
  • 15
    • -
  • 16
    • -
  • 17
    • -
  • 18
    • -
  • 19
    • -
  • 20
    • -
  • 21
    • -
  • 22
    • -
  • 23
    • -
  • 24
    • -
  • 25
    • -
  • 26
    • -
  • more {{$index}}
    • -
- - - +

...




+

...




+

...




+

...




+

...




+

...




 diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index 17e87b42eb8..a740eb7c2c2 100644 --- 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 {