CSS3 Flickering in Safari 6 on OSX (but this is not the flickering-to-white issue!)

Question

This issue does not present on iOS or on 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 by 10.8.3 preview build 12D65 which comes with Safari 6.0.3). I shall test on Lion 10.7.5 with Safari 6.0.2 shortly, and will also be testing on preview build 12D68 as well.

http://jsfiddle.net/zrr2b/

Here is a fiddle that makes the problem quite apparent. If you've got a Mac running ML, you should see a significant difference between Chrome and Safari where Safari flickers a lot as you move the mouse around.

Basically the problem is that Safari will intermittently draw the target transform being set from JS for a single frame, then continue the transition animation. This causes a flicker, but only if the transition was in the middle of going somewhere to begin with. So the bug won't rear its ugly head for most (non intensive use) of CSS3 transition, but if functionality or visual effects depend on it to smoothly interpolate to a target (as my current project does) this flicker is not pleasant.

I have looked at similar topics related to flickering and applied pretty much all combinations of styles to counteract flickering, such as the -webkit-backface-visibility: hidden, forcing various parent elements to gain hardware acceleration, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000, and none of them unfortunately do anything to address this Safari-specific problem of flickering, that is, flickering not to white or blank, but flickering to the target transform for a single frame.

Here in this branch you can see me set a bunch of styles that help with "regular flickering" but have no effect for me. http://jsfiddle.net/zrr2b/1/

As this is not a webkit specific issue I am unsure where to go about posting a bug report. It would be especially nice to get this in before 10.8.3 release since I see this as a rather big issue. Remember, this is the sort of thing that we're depending on HTML5 to do well in order for it to really kill Flash.

Updates:

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

Answer 1

There are a few different ways of experimenting with reducing the flickering. The big problem however, it's that they seem to be "hit and miss". So you got to try a few to see which one helps resolve the issue.

But they center around the same few things:

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

If this doesn't quite do the trick, try:

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

If this also fails, try this:

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

You can read about each one of them through the W3C. But they have all worked for me on different circumstances with not fluid animations, and flickering ones, including some very odd ones, a lot jumpier than your fiddle.

They would go in the div being animated.