-webkit-transform: kill-the-flash

This issue has been popping up all over the place lately. When hovering over elements with certain css3 transform properties set on the hover state, Chrome and Safari sporadically flash. Unless you're into causing seizures, this effect is probably not what you're going for.

To prevent the infamous black flash in Chrome and white flash in Safari, you need to set any element you plan on transforming in the future (like on :hover or with an added class) in 3d space from the start.

For Example:

.item { -webkit-transform: translateZ(0); } .item:hover { -webkit-transform: scale(1.5); } 

-webkit-transform: translate3d(0, 0, 0) will accomplish the same thing. The flash seems to occur when the browser switches to gpu accelerated rendering for an element. Thus, by giving the element a gpu accellerated property from the get-go, the browser does not have to switch in and out of rendering modes, and the flash is prevented.

There is a downside.

In Chrome, without this fix, if there is text inside of the element you are transforming, the text nicely re-renders when the transformation is done. With the translateZ(0) fix, the text is rasterized and stretched, causing things to get fuzzy. So say you scale some text up to 1.5 percent — you'll get something like this:

-webkit-transform: scale(1.5) WITH the fix.

-webkit-transform: scale(1.5) WITHOUT the fix.

As you can see in the second image, the text properly re-renders when the transform is complete (in Chrome), where as the second image with the translateZ fix does not. Ultimately, translateZ does seem to be the lesser of 2 evils for now. The good news is, that as of Chrome 17.0.963.26 dev, I'm not seeing the flashing issue at all. Hopefully that means it's been addressed, and that the public release and Safari will soon follow suit.