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 {