v145 · Web APIs · CLS Demo

CLS Demo

Triggers a layout shift and reads the resulting LayoutShift entry, showing the reported value, the rects in CSS pixels, and how the device pixel ratio affects interpretation.

Click "Trigger shift" to move the blue element — a PerformanceObserver watching layout-shift entries will capture the event. The rects are reported in CSS pixels in Chrome 145+.

shift stage

shifting

captured entry

LayoutShift API—
entry.value (shift score)—
previousRect (CSS px)—
currentRect (CSS px)—
window.devicePixelRatio—
viewport (CSS px)—

code

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue; // skip user-initiated shifts

    for (const source of entry.sources) {
      // Chrome 145+: rects in CSS pixels
      const prev = source.previousRect;
      const curr = source.currentRect;

      console.log('shift score:', entry.value.toFixed(4));
      console.log('from:', prev.top, prev.left, prev.width, prev.height);
      console.log('to:', curr.top, curr.left, curr.width, curr.height);

      // CSS px vs physical px:
      // CSS px rect * devicePixelRatio = physical pixels on screen
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

see also