175

Possible Duplicate:
iphone webkit css animations cause flicker

For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing:

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

Right before the transition takes place, there is a flicker. Any idea why this is, and how I could fix the problem?

Thanks!

Update: this only occurs in Safari. It does not happen in Chrome, although the animation does work.

3
  • I noticed the very problem in iOS 4.2 beta 2.
    – rpitting
    Oct 13, 2010 at 8:16
  • 1
    happens to me on FF version 17.0 now... with scaled objects that are scaled beyond the size of the window
    – vsync
    Nov 29, 2012 at 6:06
  • Behavior always in Chrome in some cases... Jan 18, 2017 at 10:10

8 Answers 8

297

The solution is mentioned here: iPhone WebKit CSS animations cause flicker.

For your element, you need to set

-webkit-backface-visibility: hidden;
10
  • 11
    My transitions was affecting other elements on the site and I ended up by having to add the rule to all elements on the site.
    – mlunoe
    Jan 10, 2013 at 13:53
  • 3
    Using a wildcard selector for this property actually caused additional flickering from other elements. My working solution was to selectively apply the property to elements that were being translated.
    – hlfcoding
    Sep 17, 2013 at 3:19
  • 1
    had to add it to parent container too.
    – chovy
    Oct 1, 2013 at 6:46
  • 4
    Use -webkit-backface-visibility: hidden; wisely! I just tried to use it on a scrollable list with images and it caused serious framerate drops. Apr 13, 2014 at 21:35
  • 1
    PLEASE do not use a wildcard to apply the property to your entire site. Use it sparingly on the troublesome elements. It can drastically reduce performance.
    – Primus202
    Sep 8, 2015 at 23:47
94

The rule:

-webkit-backface-visibility: hidden;

will not work for sprites or image backgrounds.

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

screws up backgrounds that are tiled.

I prefer to make a class called no-flick and do this:

.no-flick{-webkit-transform:translate3d(0,0,0);}
4
  • 6
    You are right, the backface-visibility fix does not work on image backgrounds. Thanks.
    – ppcano
    Oct 6, 2012 at 12:15
  • 5
    Note, when using translate3d(0,0,0) anywhere Chrome now breaks any background-position: cover that you may or may not have.
    – pyronaur
    Jul 31, 2013 at 10:49
  • 3
    This is also the way to go with SVGs.
    – Dillon
    Sep 11, 2015 at 16:14
  • I ran into a similar issue... its not exactly the same, however I could see it being relevant in some cases. I had a card flip with a background svg on the backface that was backface-visibility: hidden. On webkit, the background would show until the flip finished, then disappear. My transform was : translateY(180deg). To fix the disappearance in webkit I had to apply, transform: translateZ(-1px) translateY(180deg);, this resolved the disappearance issue. A z-index issue, but of the 3d space, not dom layering. Tricky.
    – KazaJhodo
    Oct 26, 2017 at 1:43
55

Add this css property to the element being flickered:

-webkit-transform-style: preserve-3d;

(And a big thanks to Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)

1
  • this is great - it didn't solve the problem, but it did force my code to be more strict and made tracking down the actual issue easy to find.
    – itsclarke
    Mar 24, 2021 at 20:10
21

For a more detailed explanation, check out this post:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

I would definitely avoid applying it to the entire body. The key is to make sure whatever specific element you plan on transforming in the future starts out rendered in 3d so the browsers doesn't have to switch in and out of rendering modes. Adding

-webkit-transform: translateZ(0) 

(or either of the options already mentioned) to the animated element will accomplish this.

1
  • 3
    This worked after putting an actual value in: transform: translateZ(0.1px)
    – bob
    Jun 24, 2017 at 0:10
17

I had to use:

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

on the element, or I would still get a flickr the first time a transition occurred after page load

14

I found that applying the -webkit-backface-visibility: hidden; to the translating element and -webkit-transform: translate3d(0,0,0); to all its children, the flicker then disappears

7

Trigger hardware accelerated rendering for the problematic element. I would advice to not do this on *, body or html tags for performance.

.problem{
  -webkit-transform:translate3d(0,0,0);
}
1

Both of the above two answers work for me with a similar problem.

However, the body {-webkit-transform} approach causes all elements on the page to effectively be rendered in 3D. This isn't the worst thing, but it slightly changes the rendering of text and other CSS-styled elements.

It may be an effect you want. It may be useful if you're doing a lot of transform on your page. Otherwise, -webkit-backface-visibility:hidden on the element your transforming is the least invasive option.

Not the answer you're looking for? Browse other questions tagged or ask your own question.