v145 · Web APIs · Zoom Resilience Checker

Zoom resilience checker

Cause the same DOM shift at three zoom levels — 100 %, 150 %, 200 % — and see how CLS reports it. Before Chrome 145 the score scaled with zoom (penalising zoomed users); now it's stable in CSS pixels.

controls

Anchor block (will be pushed down by the shift)
Following content — observe how the anchor moves.

code

// Chrome 145: LayoutShift.value is reported in CSS pixels, not device
// pixels. The fraction is independent of zoom/devicePixelRatio.
new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log({ value: entry.value, hadRecentInput: entry.hadRecentInput });
  }
}).observe({ type: 'layout-shift', buffered: true });

see also