Duplicate events in a single frame in Chrome

A similar was asked previously on Google Forums, so I've quoted the explanation given below:

The signal that we use for frame boundaries is emitted when thecompositor actually draws layers, and there are plenty ofopportunities for the compositor to bail out before actually drawing,most common being the update being outside of view-port. So the flowin your case is likely as this:

• you invalidate styles;
• the main thread requests a frame from the impl side;
• the impl side begins a frame and requests a main thread frame;
• the main thread performs style recalc/layout/update layer tree;
• it turns out there are no invalidations within the visible area;
• frame is not drawn. (the above is repeated several times, then something is actually drawn, and at this point we mark next frameboundary in Timeline).

Comment by: Andrey Kosyakov

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

From what I understand, invalidating styles is the process of deciding which elements need to have their computed styles recalculated. This is done by storing meta data of the relationships between the elements in the form of Descendant Invalidation Sets.

Update:

I can replicate the same behaviour in on Chrome for Windows as you can see below:

I can't see any reason why the compositor would bail out but I'm not so familiar with the intricate details of this. It's somewhat complicated.