HTML & CSS - - By Craig Buckler

How to Fix the Chrome Animation Flash Bug

A strange problem occurred when I was developing the HTML5 and CSS3 Calendar Icon. The animation looked great in Firefox and IE but Chrome and Opera 15+ flashed the whole screen white when you hovered over the icon. It possibly appears in some editions of Safari too.

The issue seems to affect Chrome on certain OS and hardware combinations. Hover over the calendar icon on the demonstration page — do you see the flash?…

If you can’t see it, consider yourself lucky. The screen flash wipes the whole page then redraws it a fraction of a second later — and it happens every time you hover over the icon. Before you ask, setting a white background doesn’t fix the problem!

The issue was raised on the Chromium bug tracker in 2011. It’s been closed for more than a year but it’s not clear whether it was actually fixed. I’ve not experienced it before, so it’s possibly re-appeared in certain installations.

The flash occurs when CSS3 transformations such as rotations or skews are applied within animations following a hover or focus event. Unfortunately, it’s not consistent so I can’t be any more specific.

Luckily, there is an easy — if bizarre — fix:

#element
{
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);
}

backface-visibility must be set to hidden on the element in its non-transformed state.

Additionally, I needed to apply an initial transformation — any type will do. This can be something such as scale(1) or rotate(0deg) which has no noticeable effect. Perhaps this initializes hardware acceleration or another rendering feature?

Other developers have reported that -webkit-transform: translate3D(0, 0, 0); or -webkit-transform-style: preserve-3d; can also work. They didn’t for me, but I suspect it depends on the page and element being animated.

I’ll be interested to know if you experience the animation flash in Chrome or Safari and whether the fix works: please try the demonstration page…

Apologies for a slightly unusual article topic but I bet someone, somewhere will be banging their head against this problem today. It makes you long for the carefree days of simple IE6 fixes!

Sponsors
Login or Create Account to Comment
Login Create Account