v145 · Performance · CLS · demo

Shift Reporter

Trigger a controlled layout shift and read the real LayoutShift entry from a PerformanceObserver. See the value, previousRect, and currentRect in CSS pixels. The panel also shows what the score would have been before Chrome 145 on a high-DPI display — demonstrating why the CSS-pixel change makes CLS consistent across devices.

Chrome 145+ — LayoutShift entries use CSS pixels. Before, the same visual 100px shift scored ~4× higher on a DPR=2 device. Now it's consistent.

Set the shift distance · click "Trigger shift" · read the CLS score and the simulated pre-145 score at DPR=2

Shift distance: 100 CSS px

Simulated DPR (pre-145 calc)

Actions

Layout shift stage

Shifting content block

Chrome 145+ (CSS pixels)

—

CLS value · unit-consistent

Trigger a shift to see the live LayoutShift entry value.

Pre-145 simulation (DPR 2×)

—

Simulated · DPR-scaled physical pixels

Would have been DPR² × higher on this display.

LayoutShift entries

———No shifts yet

// LayoutShift API — Chrome 145 CSS pixel change

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue;

    // Chrome 145+: value uses CSS pixels → same score on all displays
    console.log('CLS value:', entry.value);

    // Sources report rects in CSS pixels too
    for (const src of entry.sources) {
      console.log('previousRect:', src.previousRect); // CSS pixels
      console.log('currentRect:', src.currentRect);   // CSS pixels
    }

    // Before Chrome 145: same shift on DPR=2 → score × 4 (DPR²) higher
    // Chrome 145: score is DPR-independent — consistent across devices
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

see also