demo · v139
Layout Shift & Scroll Anchor Debugger
Chrome 139 changes how scroll anchoring chooses priority candidates. This debugger measures a real target paragraph before and after upstream layout shifts. The left scroller opts out with overflow-anchor: none; the right scroller uses the browser's anchoring algorithm with overflow-anchor: auto.
overflow-anchor parser
checking
measured anchor
highlighted reading paragraph
edge branch
top-of-scroll insertion
scrollTop: 0px
Opt-out comparison — overflow-anchor: none
scrollTop: 0px
Browser anchoring — overflow-anchor: auto
Measured anchor movement
Latest opt-out target movement
0px
Latest browser-anchored target movement
0px
Total opt-out movement
0px
Total browser-anchored movement
0px
Latest browser scroll adjustment
0px
Reset centers the highlighted paragraph. Trigger a scenario to measure the same target before and after the layout shift.
how to read the measurement
The highlighted paragraph is the anchor candidate being watched. When content is inserted above it, the opt-out scroller should report a large target movement. The browser-anchored scroller should report near-zero target movement and a positive scroll adjustment, showing that Chrome compensated for the upstream shift.
/* Opt out only for subtrees that should not anchor. */
.old-comparison { overflow-anchor: none; }
/* Default browser behavior. Chrome 139 improves priority candidate selection. */
.browser-anchored { overflow-anchor: auto; }