CSS3 Flicker in Safari 6 on OSX (but it's not a flicker issue on a white background!)

Question

This issue is missing on iOS or Chrome, so it is not a Webkit related issue. It seems to be specific to the latest Safari 6.0.2 on OS X 10.8.2 (and not fixed in 10.8.3 Preview build 12D65, which comes with Safari 6.0.3). I will be testing on Lion 10.7.5 with Safari 6.0.2 in the near future, and will also be testing version 12D68 as well.

http://jsfiddle.net/zrr2b/

Here is a fiddle that makes the problem very obvious. If your Mac runs ML, you should see a significant difference between Chrome and Safari, where Safari flickers a lot when you move the mouse.

The main problem is that Safari will periodically output the target transform from JS for a single frame, and then continue with the transition animation. This causes a flicker, but only if the transition was in the middle of somewhere to start. Thus, the error will not force its ugly head for most (not heavy use) CSS3 transitions, but if the functionality or visual effects depend on it to smoothly interpolate to the target (like my current project), this flicker is not like it.

I looked at flickering related topics and applied almost all flicker style combinations, such as -webkit-backface-visibility: hidden , forcing various parent elements to receive hardware acceleration, -webkit-transform-style: preserve-3d , -webkit-perspective: 1000 and none of them, unfortunately, are doing anything to solve this problem related to Safari, flicker, i.e. flicker is not white or empty, but flicker to the target conversion for one frame.

Here in this thread, you can see how I set up a bunch of styles that help with “regular flicker” but have no effect for me. http://jsfiddle.net/zrr2b/1/

Since this is not a webkit related issue, I am not sure where to go by sending an error message. It would be especially nice to get this before the release of 10.8.3, as I consider this a pretty big problem. Remember, this is what we, depending on HTML5, do well to really kill Flash.

Updates:

• Safari version 6.0.3 (8536.28.10) for Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4 ") still suffers from this problem
• Safari on Windows (5.1.7) does not suffer from this error
• Safari version 6.0.2 (7536.26.17) on Lion 10.7.5 (Macbook Air Mid 2011) does not suffer from this error

Answer 1

There are several different ways to experiment with reducing flicker. However, the big problem is that they seem to hit and miss. Therefore, you should try several to find out which one will help solve the problem.

But they are centered around the same things:

 -webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */ transform: translateZ(0); /* non-webkit specific */ 

If this is not quite a trick, try:

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

If this also fails, try the following:

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

You can read about each of them through the W3C. But they all worked for me in different circumstances, not with lively animations, but with flickering ones, including very strange ones, much more complex than your violin.

They will go to the div animation.