iPhone WebKit CSS animations cause flicker

问题

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??

回答1:

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;

回答2:

Try this, and hopefully it will help:

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

回答3:

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

回答4:

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.

回答5:

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);

回答6:

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.

回答7:

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.

回答8:

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.

回答9:

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.

回答10:

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"); }

回答11:

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

回答12:

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>

回答13:

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

回答14:

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/

回答15:

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

回答16:

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.

回答17:

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);

回答18:

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.

回答19:

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.

来源：https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker

标签

iphone

css

animation

webkit

flicker