CSS3 Transform affecting other elements with chrome/safari

Question

I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.

http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.

Answer 1

This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.

Update:

As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel

You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.

Answer 2

Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:

-webkit-backface-visibility: hidden;

Answer 3

The solution for me was to apply the bellow css to the parent of all affected elements.

-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);

Answer 4

I was having the same issue in Chrome but not Firefox.

The temporary fix is to add a web-kit fix and remove the transition:

-webkit-transition: none;