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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jingqi Xie

    Not yet fixed. I have Maxthon 4.2, which is a Chrome 30 shell, and tried the animation flash fix demo, but I saw exactly the same result as the previous one – it flashed the full screen white.

  • http://www.plauditdesign.com/ Michael Schlotfeldt

    Are sure the addition of both properties is needed?

    I tried only adding “-webkit-backface-visibility: hidden;” (which is what I use to fix similar issues), and it stopped blinking.

    • Craig Buckler

      I needed the initial transform too.

      • http://www.plauditdesign.com/ Michael Schlotfeldt

        Hi Craig. What browser, version and OS are you running?

        • Craig Buckler

          Chrome 31, Windows 8.1. However, I haven’t experienced it on all PCs, so I suspect certain hardware configurations have different effects and fixes.

          • http://www.plauditdesign.com/ Michael Schlotfeldt

            Strange. That is the exact same as me. Hopefully some more people will test and give us a better idea.

    • http://www.plauditdesign.com/ Michael Schlotfeldt

      Anybody else? Based on Paul O’B’s comment perhaps only backface-visibility is the only needed property for him as well – ?
      For Chrome 31 on Win 8, backface-visibility fixes the issue and transform adds nothing. What about everybody else’s computer setups?

  • jennifererrasta

    Hi Craig, Interesting information.

  • Craig Buckler

    Thanks Paul.

    And let’s not forget that you may not want the backface to be hidden. Is there a fix which allows the backface to appear?

    • Paul O’B

      I guess that most times you want the backface to appear you will be using a transform of some kind which is the other fix you mention so the problem doesn’t usually occur. I believe any of the 3d rendering rules is supposed to cure the bug.

      e.g.
      -webkit-transform: translate3d(0,0,0);

      I haven’t really tested this in detail though.

      • Craig Buckler

        That didn’t work for me in this example but may help elsewhere.

  • Dick

    Using Win7 Pro SP1 and Chrome Version 31.0.1650.63 m, I see absolutely no hover effect at all, with or without using the apply fix button.