[codedokode]

The article still doesn't answer how scrolling a page can cause layout change. Layout change occurs when elements are added or removed from DOM or when they change their size. I assume there is some Javascript that updates styles on scroll event.

[dmitriid]

> Layout change occurs when elements are added or removed from DOM or when they change their size

Layout change happens even as you as much as glance at a web page. See e.g. https://csstriggers.com Also things like getting the size or offset of an element would cause a layout recalculation (I don't know if it's still the case).

[shadowgovt]

I'd be willing to bet money that Google has hooked the onScroll event and is computing their own top left offset for the interior panel instead of just letting native scroll logic take care of it.

[megous]

Dunno. I have a large plain (onscroll is not listened to) table in Chrome, and it does constant re-layouts during scrolling. It looks like Chrome does some optimization where it only paints portion of the table and when you scroll, it will paint the new portion only when you scroll just slow enough (and does re-layout whenever this happens, I guess). Otherwise you see just white space. It causes huge CPU load too.

Firefox does not do this, and has smooth scrolling as a result with little CPU load.

Sometimes some optimizations just don't work out.