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\

Answer 1

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;

Answer 2

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 3

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

-webkit-backface-visibility: hidden;

Answer 4

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.