iPhone WebKit CSS animations cause flicker

Question

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/

After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around.

The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??

score 129 · Answer 1 · answered Aug 11 '10 at 18:49

129

I added -webkit-backface-visiblity and that mostly helped, but I still had an initial flicker after reloading the page. When I added -webkit-perspective: 1000, there was no flicker whatsoever.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

answered Aug 11 '10 at 18:49

Wes Baker

1,519
1
10
8

21

What's the magic behind 1000? Do any other value (>0) may work? – cYrus Dec 23 '11 at 20:08
NOTE: this makes the animation unresponsive to mouse events on windows chrome v19: in practice adding this, there is no flicker, but the animation not always starts (on mouse hover or whatever) – skyline26 Jun 26 '12 at 20:52
Fixed my problem: simple animating div was popping 1px to the left on animation start in Chrome 25 but was fine in Safari 6.0.2 and Canary 27. Glad it works, wish I understood why. – joemaller Mar 05 '13 at 05:06
1

NOTE: adding backface-visibility will change your colors rendering. Here is an example with backface visibility on and off: http://bit.ly/13ldbvY – Tamik Soziev Apr 18 '13 at 22:38
3

I had this problem with text flickering when trying to transition link elements. Changing the backface-visibility altered the anti-aliasing, making the font really thin. Fixed by using -webkit-font-smoothing: subpixel-antialiased; – Dan Jun 20 '13 at 01:45
Don't understand why this answer wasn't accepted. This solution really fixed very annoying flicker bug in Google Chrome because of the CSS3 transition effect I was using. Thanks a ton for sharing this. – Devner Aug 30 '13 at 13:13
i just added this to *every* element on the page and nothing worked. I'm using transit.js for animations btw, could that be it? – Alamgir Mand Feb 28 '14 at 02:24
Nice one! Worked perfectly :) – Moritz May 15 '14 at 10:34
I am trying but it is not working for me. Here is a code snippet: http://www.codeply.com/go/g7Zp98paz5 – Fran_gg7 Nov 21 '16 at 13:42
2

@cYrus I guess we'll never know – Denny Aug 29 '18 at 09:42
It looks like `perspective: none;` is working as well – gogaz Apr 21 '20 at 16:26
this code to add animation dom? or add to it's parent dom? – wenzi Jan 26 '22 at 13:02

score 40 · Answer 2 · answered Jul 28 '10 at 01:42

40

Try this, and hopefully it will help:

#game {
  -webkit-backface-visibility: hidden;
}

answered Jul 28 '10 at 01:42

donohoe

13,867
4
37
59

2

This works great in Safari default but fails in standalone mode. Do you have any ideas? – cYrus Dec 23 '11 at 21:54

score 22 · Answer 3 · answered Oct 14 '10 at 14:33

22

body {-webkit-transform:translate3d(0,0,0);}

answered Oct 14 '10 at 14:33

Brian D'Astous

1,314
1
18
26

1

This did it for me.. however I had to apply it on a `#wrapper` element since applying on the body would screw up the layout. – adamJLev Aug 19 '11 at 14:31
1

If anyone want to see the backface "-webkit-backface-visibility: hidden;" didn't works, but this one is perfect. Thanks! – Nachtgold Apr 22 '13 at 17:06
perfect. `-webkit-backface-visibility: hidden;` caused any scale transformations to be blurry. `body {-webkit-transform:translate3d(0,0,0);}` worked a treat. – Liam Aug 27 '13 at 09:27
I am trying but it is not working for me. Here is a code snippet: http://www.codeply.com/go/g7Zp98paz5 – Fran_gg7 Nov 21 '16 at 13:42
2

This worked for me. In my case, `scale(1)` caused the flicker. thanks a lot – jansesun Oct 10 '18 at 10:23

score 13 · Answer 4 · answered Jul 02 '12 at 11:21

13

The actual answer for my case is here. Someone was close with: -webkit-backface-visibility: hidden; But the real answer is -webkit-backface-visibility: hidden; needs to be added to the parent div.

answered Jul 02 '12 at 11:21

Johan De Silva

131
1
2

I actually needed to add `-webkit-backface-visibility: hidden;` to the parent div, the animated div, AND the children of the animated div. Once I did that, it worked flawlessly. – mattstuehler Mar 12 '13 at 13:36
2

I think that fixed my flicker too by adding it to the parent. What does it actually do? – chovy Oct 01 '13 at 06:27
Adding it to the parent undoes the "fixed" position on the child elements though :( – James Feb 03 '15 at 14:14

score 12 · Answer 5 · edited May 23 '17 at 12:10

I had a problem with a "flickering" CSS transition as well. The animation in question was a menu sliding in from off screen, and just when the animation finished, the entire menu flashed/flickered.

As it turned out, this was caused by an actual iOS feature, the "tap highlight", which for some reason kicked in after the CSS animation finished (i.e. way after the actual tap), and highlighted the entire menu instead of only the element that was tapped. I "fixed" the issue by entirely disabling tap-highlight, as described here:

-webkit-tap-highlight-color: rgba(0,0,0,0);

score 5 · Answer 6 · edited May 23 '17 at 12:34

5

Michael's answer -webkit-backface-visibility: hidden; worked when we hit this problem. We had translateZ(0px) on our <body> tag to prevent an iOS 3.1.3 and earlier IFRAME boundary bug and it caused anims to flicker. Adding -webkit-backface-visibility: hidden; to each element we animated fixed the flicker! Life saver.

edited May 23 '17 at 12:34

Community

1
1

answered Sep 11 '10 at 03:38

Rob Barreca

641
6
11

score 3 · Answer 7 · answered Apr 08 '13 at 23:05

3

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

i noticed when i had a hover state on a div the page would flicker, even if i did not have any css or js attached to it. maybe this helps someone else.

answered Apr 08 '13 at 23:05

Jesse

799
5
6

for me that one did the trick. the others were only relevant when transitions were in place. – Nadav Aug 01 '13 at 19:01

score 3 · Answer 8 · answered Jul 08 '14 at 01:53

3

If anyone finds that backface-visibility is not working, you might look at the properties already on your animated element. For us, we found that overflow-y: scroll on an absolute or fixed positioned element was causing major flickering on iOS.

Simply removing overflow-y: scroll fixed it.

answered Jul 08 '14 at 01:53

KendallB

4,799
4
19
21

Removing `overflow-y: scroll` helped my case. Thank you so much! – YemSalat Jan 20 '15 at 05:28
1

It's probably my case also. but I can't remove the overflow-y nore the absolute positon for this element. any idea? – Kobi Cohen Feb 28 '16 at 13:52

score 1 · Answer 9 · answered Nov 17 '15 at 14:05

1

Even though I had -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden the flicker was still happening.

In my case the cause was the z-index. Increasing it on active element did help.

answered Nov 17 '15 at 14:05

Morpheus

8,829
13
51
77

score 1 · Answer 10 · answered Jun 07 '16 at 12:11

I tried all the above and still had major flickering problems on Firefox and Chrome. I fixed it, or at least greatly reduced it to an acceptable issue by removing the box-shadow transform that was causing many repaints during the animation. I followed this and modified for my needs:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

bob · Answer 11 · 2017-06-24T00:31:44.633

I had to use an actual value (rather than 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Example:

<div class="foo no-flick"></div>

From what I've read, the flicker is caused by the browser switching between hardware and software rendering. And I think browser manufacturers are aware of yea olde "translate3d(0,0,0)" to force hardware rendering -- so they may now be ignoring these fake values.

=> Using an actual value may cause things to "stick".

Anyway, worked for me.

score 1 · Answer 12 · answered Aug 08 '19 at 19:36

So I found a fix for this issue where none others worked properly.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Then set the z-index for your animated element to be > 1. This somehow tricks iOS devices into rendering the animation differently, and avoids the flicker in my scenario. Adjusting z-index values may be helpful if this solution doesn't work out of the gate.

monist · Answer 13 · 2023-01-16T00:27:56.207

I've been trying to fix a similar problem for ages, and a comment in this thread was the key for me, so I'm highlighting it for others:

I actually needed to add -webkit-backface-visibility: hidden; to the parent div, the animated div, AND the children of the animated div. Once I did that, it worked flawlessly. – mattstuehler Mar 12, 2013 at 13:36

I has a horrible white flash when using transform: translate3d to reposition a div: if I added transition-duration to the transform and moved the div too far, the screen would flash white on iOS webkit browsers (only!). It drove me crazy, and I combed threads like these looking for a solution, while trying everything else I could to stop it. Here's what finally worked:

#board_container * { /* asterisk(*) => board container and all its descendants */
    /* 
       attempt to stop iOS webkit flash when board is panned 
       to its edge... is it finally working?!?
    */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

I had previously tried applying things to my #board div and its wrapper #board_container, but there were a couple more levels of elements contained within, and apparently they all needed the treatment for the white flash to disappear. What I has missing was a simple asterisk in the CSS:

#board_container * {

Never did figure out why it only happened on iOS webkit browsers, and only when the board div was translated beyond a certain extent...

mattwad · Answer 14 · 2013-09-07T18:05:58.250

Here's a new solution. I was setting the background-image with jQuery, and none of the 3d-rendering tricks worked. So I tried using classes to define the properties instead. Voilà! Smooth as butter.

This causes flicker:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Instead do:

$('#banner').attr('class', '.slide-1');

with classes defined:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

score 0 · Answer 15 · answered Apr 03 '14 at 13:48

Try this solution. It works for me in Phonegap + jQM 1.4.0:

Change this <meta name="viewport" content="width=device-width, initial-scale=1">

To this instead:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Read more here: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

score 0 · Answer 16 · answered Jun 16 '14 at 18:24

I had spent a lot of time trying to figure out this issue for Ember Animated Outlets, Phonegap, and iOS setup.

Though simple, I had to add a background to each top-level parent element that was included in the css animations. In other words, make sure that at no point in your views there is an element that doesn't have a background.

My setup was this for each template and all three elements had a background color assigned to them:

<header></header> <body class="content"></body> <footer></footer>

score 0 · Answer 17 · answered Sep 02 '15 at 08:54

0

Instead of applying the transition to "all" just specify the one you really need. It removed the flickering on my case.

answered Sep 02 '15 at 08:54

Sylvestre Lucia

19
3

score 0 · Answer 18 · answered Jul 28 '16 at 12:12

0

for me, flickering issue on safari solved by removing will-change: transform; to the animated element.

also I could solve this issue by adding overflow: hidden; to the parent, but with this, all elements with transform: translateZ() got ineffective

answered Jul 28 '16 at 12:12

Mohsen.Khakbiz

21
1
5

score 0 · Answer 19 · answered Jan 16 '18 at 12:52

I've experienced flickering when performing a slide transition when using a default Android web browser.

I've used the following transition css:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

None of the workarounds mentioned in this thread have helped to solve the issue. Finally I've found the solution. The source of flickering is the all keyword which means to perform all possible transitions. I've changed it to perform only transformation and the issue has been solved:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

score 0 · Answer 20 · answered Dec 18 '18 at 13:05

What fixed it for me was to delay the assignment of the transform-translate CSS rule. Something like this:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… Because -webkit-backface-visibility: hidden; didn't do anything for me.

score 0 · Answer 21 · answered Nov 27 '19 at 19:09

0

UPDATE 2019

You can turn on flickering by simply add these rules to your element that is transition used on.

-webkit-transform: translate3d(0, 0, 0);

Worked for me on Safarai

answered Nov 27 '19 at 19:09

Freestyle09

4,894
8
52
83

iPhone WebKit CSS animations cause flicker

21 Answers21

Linked

Related