CSS3 transition/transform/translate3d causes severe flicker on first or last “frame” of the transition (on an iPad)

Question

All,

I\'m working on a web app specifically for the iPad, and I\'m using a CSS3 transition to animate a div (move it from left to right).

My class looks like

Answer 1

All,

I'm not positive that this is the answer (especially because the flicker itself seems a little unpredictable), but anecdotally, this seems to get rid of it...

Anyway, here's what I was doing:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

Often, the FIRST time this was executed, I'd see a flicker before the animation begins. Subsequent calls would animate smoothly.

What I inferred was that, if the 3d coordinates were not set before calling the animation, you'd see a flicker. The first call sets those coordinates, so subsequent calls would animate smoothly.

So - I tried setting the 3d coordinates of the div first (essentially, when I'm first building the screen - i.e., initialization), before any animations are ever triggered.

So, thereafter - when a 3d animation is called for, the div/element's starting 3d coordinates have already been established.

That seems to eliminate the flickering.

As I said - I'm not sure if this is a robust, reliable fix, but it certainly has eliminated the problem in my current projects.

Good luck.

Answer 2

We solved many flickering and font problems by fixing the viewport.

Previously we had content going off the page (a sliding div) and the device seemed to go into conniptions when the viewport wasn't fixed, having to process data off the screen in combination with the zoom-a-bility of the displayed content.

This tag in the head solved our problems.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

Answer 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. i can't see your html but this might help

Answer 4

I was dealing with the same issue, and I found the solution here on SO: iPhone WebKit CSS animations cause flicker

It's as simple as adding

-webkit-backface-visibility: hidden;

and possibly

-webkit-perspective: 1000;

To each animated object. It worked for me, hope this helps for you too

Answer 5

Try

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
} 

but, as I understand it, this forces the iPad to use GPU acceleration

Both translate() and translate3d() create stacking context and may use layers - texture buffers in terms of GPU. So I don't think that they really make any difference in terms of acceleration.

Answer 6

I had this problem and tried all of the recommendations above. I just discovered that the z-index of the faces can cause the issue.

I had 3 panes 1 middle(flat) boths sides on angle like this \_/ - the middle one was flickering while the z-index was above or the same as the sides. Moving it to the bottom fixed the flickering entirely.

Hope that helps.