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:

	-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!

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

  • 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?

  • Paul O’B

    I’ve run into this bug a number of times over the last couple of years
    and have used the backface-visibility:hidden fix to successfully cure
    this and similar issues. Sometimes when you animate in chrome the
    animation leaves artefacts across the screen and the backface rule fixes that also.

    We had another similar example quite recently in the forums:

    you have to be careful with backface-visibility:hidden (and transforms) in fixed
    positioned layouts as it triggers some strange behaviours.


  • joshcoast

    Still flashes in safari 7.0.1 too. Darn.

  • joshcoast

    Oh! I didn’t see the “apply fix” button! Your fix works, thanks!

  • 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.

      -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.

        • Paul O’B

          Hi Craig,

          Just tested your demo page and in chrome (PC and Mac) the backface:visibility:hidden on its own fixes the issue. The 3d transforms didn’t seem to work on this particular bug as you mentioned.

          What’s strange though is that if you create a standalone demonstration outside of cssdeck then there is no flash in chrome. I just tried a similar demo in codepen (http://codepen.io/paulobrien/full/nwKIz) and in edit mode you get the flash but in full page mode you don’t get the flash.

          I thought it might be the iframe so I created an iframe standalone demo but that worked without a flash so I’m guessing that it’s a script or some combination of both that is causing the issue here but I can’t seem to isolate it.

  • 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.

Related books & courses
Available now on SitePoint Premium

Preview for $1