Geek Answers Handbook

Chrome screen when using CSS3 animations (first time only)

EDIT: The answer from @Archer seems to fix it. (please vote for him, because I do not have enough points for this).
To learn more about the error, click here: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

My problem is not easy to explain. I compiled a test case on jsfiddle. You can find the link at the bottom of this text.

Before you click on the demo link, pay attention to the following:

Make sure you are using Google Chrome. (due to -webkit CSS prefixes).

Pay attention to the first time you press the orange button. Before starting the animation, you should see a short flash. When you try again (after pressing the reset button) everything will be fine, there is no blinking screen. But if you clear the browser cache (CTRL-SHIFT-DEL), close the browser and reload the page, hiccups will appear again.
I hope I have clearly explained this.

DEMO: http://jsfiddle.net/NKQNX/14/

(sorry for my spelling, English is not my first language)

+7
source share
2 answers

This seems to be a known issue with webkit animations. A little search engine came up with this ...

body { -webkit-transform: translate3d(0, 0, 0); }

I added this to css in your example and tried it about 10 times and didn’t get the flicker once, where I was able to get it in sequence earlier.

http://jsfiddle.net/NKQNX/16/

+11
source

I have seen this many times in older builds of Chrome, but as of the last few weeks it has been fixed. I run Chrome 19 and no longer see these flashes.

I think this happens when the 3D broadcast is animated. Forcing a 3d translation, as Archer pointed out, this is avoided since the page is already displayed on the graphics card.

0
source

More articles:


All Articles