Prevent flicker on webkit-transition of webkit-transform
Solution 1
The solution is mentioned here: iPhone WebKit CSS animations cause flicker.
For your element, you need to set
-webkit-backface-visibility: hidden;
Solution 2
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);}
Solution 3
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)
Solution 4
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.
Solution 5
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
Related videos on Youtube
Fred
All around JavaScripter. Blogger at badassjs.com. Audio hacker audiocogs.org. Engineer at Storify.
Updated on November 28, 2020Comments
-
Fred over 3 years
Possible Duplicate:
iphone webkit css animations cause flickerFor 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.
-
rpitting over 13 yearsI noticed the very problem in iOS 4.2 beta 2.
-
vsync over 11 yearshappens to me on FF version 17.0 now... with scaled objects that are scaled beyond the size of the window
-
Maxime Lafarie over 7 yearsBehavior always in Chrome in some cases...
-
-
ppcano over 11 yearsYou are right, the backface-visibility fix does not work on image backgrounds. Thanks.
-
mlunoe over 11 yearsMy transitions was affecting other elements on the site and I ended up by having to add the rule to all elements on the site.
-
Primus202 about 11 yearsWorked for me as well. I had a hidden menu that was pushing the content down with a CSS animation when it was shown. Applying the above rule to my main content div that followed the hidden menu fixed my issue without drastically affecting performance. NB: When I applied it to my global HTML rule it made the CSS animation quite a bit worse, beware!
-
pyronaur over 10 yearsNote, when using translate3d(0,0,0) anywhere Chrome now breaks any background-position: cover that you may or may not have.
-
Nguyen Hieu over 10 yearsUsing 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.
-
chovy over 10 yearshad to add it to parent container too.
-
lol over 10 yearsI think my issue (albeit an intermittent one) was fixed by the universal selector
-
mimimimichael about 10 yearsUse -webkit-backface-visibility: hidden; wisely! I just tried to use it on a scrollable list with images and it caused serious framerate drops.
-
aphax over 9 yearsI would caution against using -webkit-backface-visibility: hidden; as it can cause rendering glitches and make transformed elements appear extremely blurry. I have had some success with using this, but often times it doesn't actually work anyway or I have to go through a lengthy trial and error process to find which elements I have to apply it on. Applying it on all (*) elements has always given me rendering issues with Chrome and I have little hope those will get fixed any time soon.
-
Primus202 over 8 yearsPLEASE 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.
-
Dillon over 8 yearsThis is also the way to go with SVGs.
-
Fran_gg7 over 7 yearsI am trying but it is not working for me. Here is a code snippet: codeply.com/go/g7Zp98paz5
-
bob almost 7 yearsThis worked after putting an actual value in: transform: translateZ(0.1px)
-
Aust almost 7 yearsNone of the answers here worked for me. Not only was I transitioning but I was also changing the
overflow
property. This answer about -webkit-overflow-scrolling was the solution to my problem. -
KazaJhodo over 6 yearsI 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.
-
itsclarke about 3 yearsthis 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.