Duplicate events in a single frame in Chrome

Question

I am testing sub-optimal but very simple CSS animations in Chrome on Mac. In dev tools, I see that "recount style" and subsequent actions are performed several times in one frame. "Update layer tree" is called 3 times.

I do not see this behavior in Chrome on Windows. I also do not see equivalent behavior in Firefox.

Here is a simple demo I'm using: http://s.codepen.io/lonekorean/debug/44cf0a50e321de7ec7ff4fac5d3f4514

Why do I see a recurrence of these events? It seems very inefficient for Chrome to work in a single frame, so I would like to understand why.

Thank!

Answer 1

Google, :

, , , , , , , , . , , , :

• ;
• ;
• impl ;
• recalc/layout/update layer tree;
• , ;
• . ( , - , ).

:

: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/JaWHxD6oaXU

, , , . .

:

Chrome Windows, :

, , . .