v145 · Web APIs · Performance

Use of CssPixels in LayoutShift API

Chrome 145 changes the Cumulative Layout Shift (CLS) API to report layout shift values in CSS pixels rather than physical pixels, making CLS scores consistent regardless of display density or device pixel ratio.

background

The Layout Instability API (CLS) measures how much page content shifts unexpectedly. Before Chrome 145, the value reported by LayoutShiftAttribution entries was calculated using physical pixels (device pixels), which meant the same visual shift would report a different score on a high-DPI display (device pixel ratio 2 or 3) versus a standard display.

Chrome 145 aligns the API with the spec by using CSS pixels (logical pixels) throughout, so a 100px shift reports the same shift fraction on all displays.

concepts

  1. CLS Demo

    Triggers a layout shift and reads the LayoutShift entry from a PerformanceObserver, showing the reported value, viewport dimensions, and device pixel ratio.

  2. Pixel Units

    Explains CSS pixels versus physical pixels, how device pixel ratio affects measurements, and why the change makes CLS values more meaningful for high-DPI devices.

  3. Zoom Resilience Checker

    Trigger the same 80px shift at 100 / 150 / 200 % zoom and watch CLS stay stable. Surfaces why CSSPixels reporting matters for users zoomed for accessibility.

  4. Shift Reporter

    Trigger a controlled layout shift and read the live LayoutShift entry from a PerformanceObserver. See the CSS-pixel value alongside a simulation of what the score would have been on a DPR=2 or DPR=3 device before Chrome 145.

the change

// LayoutShift entries now use CSS pixels (Chrome 145+)
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    // entry.value — shift fraction (unchanged formula, but uses CSS px)
    // entry.sources — LayoutShiftAttribution[]
    for (const source of entry.sources) {
      // source.previousRect / source.currentRect — in CSS pixels (logical)
      // Before Chrome 145: reported in physical pixels (device pixels)
      // After Chrome 145: reported in CSS pixels — consistent across DPR
      console.log(source.previousRect, source.currentRect);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

// Visual impact: CLS scores on high-DPI devices (DPR=2) were 4× higher
// than on standard displays for the same visual shift.
// Chrome 145 normalises this.

references