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!
Frequently Asked Questions (FAQs) about Chrome Animation Flash Bug
What is the Chrome Animation Flash Bug?
The Chrome Animation Flash Bug is a glitch that occurs in Google Chrome when animations flash or flicker unexpectedly during browsing. This can be due to a variety of reasons, including issues with hardware acceleration, outdated browser versions, or conflicts with browser extensions. It can disrupt the user experience, especially when viewing websites with heavy animation elements.
How can I fix the Chrome Animation Flash Bug?
There are several ways to fix the Chrome Animation Flash Bug. One of the most common methods is to disable hardware acceleration in your Chrome settings. This can be done by going to ‘Settings’, then ‘Advanced’, and then ‘System’. From there, you can toggle off ‘Use hardware acceleration when available’. Another method is to update your Chrome browser to the latest version, as this can often resolve any bugs or glitches.
Can browser extensions cause the Chrome Animation Flash Bug?
Yes, certain browser extensions can cause the Chrome Animation Flash Bug. If you suspect an extension is causing the issue, you can disable all extensions and then enable them one by one to identify the problematic extension. Once identified, you can choose to remove or disable this extension to resolve the issue.
How can I update my Chrome browser to the latest version?
To update your Chrome browser, click on the three dots in the top right corner of the browser, then go to ‘Help’ and then ‘About Google Chrome’. This will automatically check for updates and install them if available. After the update is installed, you will need to relaunch your browser.
What is hardware acceleration and why does it cause the Chrome Animation Flash Bug?
Hardware acceleration is a feature in Chrome that allows the browser to use your computer’s hardware to speed up processes, including loading animations. However, in some cases, this can cause issues with animations, leading to the Chrome Animation Flash Bug. Disabling this feature can often resolve the issue.
Are there any extensions that can help with the Chrome Animation Flash Bug?
Yes, there are several extensions available that can help manage animations in Chrome and potentially mitigate the Chrome Animation Flash Bug. These include ‘Animate’ and ‘Animation Extension’, both available in the Chrome Web Store. However, it’s important to note that these extensions may not resolve the issue for all users, and it’s recommended to try other troubleshooting steps as well.
Can outdated graphics drivers cause the Chrome Animation Flash Bug?
Yes, outdated graphics drivers can potentially cause the Chrome Animation Flash Bug. Updating your graphics drivers to the latest version can often resolve this issue. You can do this by visiting the website of your graphics card manufacturer and following their instructions for updating drivers.
Can the Chrome Animation Flash Bug affect other browsers?
While the Chrome Animation Flash Bug is specific to Google Chrome, similar issues can occur in other browsers due to similar reasons, such as outdated versions, hardware acceleration issues, or conflicts with extensions. The troubleshooting steps for these issues may vary depending on the browser.
How can I prevent the Chrome Animation Flash Bug from happening in the future?
To prevent the Chrome Animation Flash Bug, it’s recommended to keep your Chrome browser updated to the latest version, manage your extensions carefully, and consider disabling hardware acceleration if you frequently encounter issues with animations. Regularly updating your graphics drivers can also help prevent this issue.
What should I do if none of the suggested solutions fix the Chrome Animation Flash Bug?
If none of the suggested solutions resolve the Chrome Animation Flash Bug, it may be worth reaching out to Google’s support or community forums for further assistance. It’s also possible that the issue is related to a specific website or animation, in which case reaching out to the website owner or developer may be helpful.
Craig BucklerCraig 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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
