Skip to content

Commit ad67184

Browse files
ajoslinajoslin
committed
fix(refresher): get rid of flickers except on droid-4.4
Fixes #1014.
1 parent feffc99 commit ad67184

File tree

2 files changed

+28
-63
lines changed

2 files changed

+28
-63
lines changed

Diff for: ‎js/ext/angular/test/list-fit.html

+7-45
Original file line numberDiff line numberDiff line change
@@ -11,54 +11,16 @@
1111
</head>
1212

1313
<body>
14-
15-
<ion-header-bar class="bar-positive" ng-class="{'bar-subheader': $root.isSub}">
16-
<h1 class="title">Header!</h1>
17-
</ion-header-bar>
18-
19-
<ion-content scroll="true" ng-controller="ContentCtrl" padding="false">
20-
21-
<pre>
22-
$hasHeader: {{!!$hasHeader}}
23-
$hasSubheader: {{!!$hasSubheader}}
24-
</pre>
14+
<ion-content ng-controller="ContentCtrl" padding="false">
2515

2616
<ion-refresher on-refresh="onRefresh()" pulling-text="pull!" refreshing-text="refreshing!"></ion-refresher>
2717

28-
<ion-checkbox ng-model="$root.isSub">isSub</ion-checkbox>
29-
30-
<ul class="list">
31-
<li class="item">This ion-list should *exactly* fit</li>
32-
<li class="item">between header and footer (no gap),</li>
33-
<li class="item">even with pull-to-refresh.</li>
34-
<li class="item">4</li>
35-
<li class="item">5</li>
36-
<li class="item">6</li>
37-
<li class="item">7</li>
38-
<li class="item">8</li>
39-
<li class="item">9</li>
40-
<li class="item">10</li>
41-
<li class="item">11</li>
42-
<li class="item">12</li>
43-
<li class="item">13</li>
44-
<li class="item">14</li>
45-
<li class="item">15</li>
46-
<li class="item">16</li>
47-
<li class="item">17</li>
48-
<li class="item">18</li>
49-
<li class="item">19</li>
50-
<li class="item">20</li>
51-
<li class="item">21</li>
52-
<li class="item">22</li>
53-
<li class="item">23</li>
54-
<li class="item">24</li>
55-
<li class="item">25</li>
56-
<li class="item">26</li>
57-
<li ng-repeat="i in more">more {{$index}}</li>
58-
</ul>
59-
60-
<ion-infinite-scroll on-infinite="addMore()"></ion-infinite-scroll>
61-
18+
<p>...</p><br/><br/><br/>
19+
<p>...</p><br/><br/><br/>
20+
<p>...</p><br/><br/><br/>
21+
<p>...</p><br/><br/><br/>
22+
<p>...</p><br/><br/><br/>
23+
<p>...</p><br/><br/><br/>
6224
</ion-content>
6325

6426
<ion-footer-bar class="bar-assertive">

Diff for: ‎scss/_scaffolding.scss

+21-18
Original file line numberDiff line numberDiff line change
@@ -139,23 +139,23 @@ body.grade-c {
139139
}
140140

141141
@keyframes refresh-spin {
142-
0% { transform: rotate(0); }
143-
100% { transform: rotate(-180deg); }
142+
0% { transform: translate3d(0,0,0) rotate(0); }
143+
100% { transform: translate3d(0,0,0) rotate(-180deg); }
144144
}
145145

146146
@-webkit-keyframes refresh-spin {
147-
0% {-webkit-transform: rotate(0); }
148-
100% {-webkit-transform: rotate(-180deg); }
147+
0% {-webkit-transform: translate3d(0,0,0) rotate(0); }
148+
100% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
149149
}
150150

151151
@keyframes refresh-spin-back {
152-
0% { transform: rotate(-180deg); }
153-
100% { transform: rotate(0); }
152+
0% { transform: translate3d(0,0,0) rotate(-180deg); }
153+
100% { transform: translate3d(0,0,0) rotate(0); }
154154
}
155155

156156
@-webkit-keyframes refresh-spin-back {
157-
0% {-webkit-transform: rotate(-180deg); }
158-
100% {-webkit-transform: rotate(0); }
157+
0% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
158+
100% {-webkit-transform: translate3d(0,0,0) rotate(0); }
159159
}
160160

161161
// Scroll refresher (for pull to refresh)
@@ -185,11 +185,21 @@ body.grade-c {
185185
}
186186
}
187187

188+
.icon-refreshing,
189+
.icon-pulling {
190+
width: 100%;
191+
-webkit-backface-visibility: hidden;
192+
-webkit-transform-style: preserve-3d;
193+
backface-visibility: hidden;
194+
transform-style: preserve-3d;
195+
}
188196
.icon-pulling {
197+
-webkit-transform: translate3d(0,0,0) rotate(0deg);
198+
transform: translate3d(0,0,0) rotate(0deg);
189199
@include animation-name(refresh-spin-back);
190200
@include animation-duration(200ms);
191201
@include animation-timing-function(linear);
192-
@include animation-fill-mode(both);
202+
@include animation-fill-mode(none);
193203
}
194204
.icon-refreshing,
195205
.text-refreshing {
@@ -200,18 +210,11 @@ body.grade-c {
200210
}
201211

202212
&.active {
203-
.icon-pulling,
204-
.text-pulling {
205-
display: block;
206-
}
207213
.icon-pulling {
208214
@include animation-name(refresh-spin);
215+
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
216+
transform: translate3d(0,0,0) rotate(-180deg);
209217
}
210-
.icon-refreshing,
211-
.text-refreshing {
212-
display: none;
213-
}
214-
215218
&.refreshing {
216219
.icon-pulling,
217220
.text-pulling {

0 commit comments

Comments
 (0)