Layout instability

The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page. They're used to calculate Cumulative Layout Shift (CLS), a common metric for perceived stability.

Baseline Status: This feature is currently Limited and is missing in at least one major browser engine.

Desktop Browser Engine Support

Google Chrome

84

Supported

Mozilla Firefox

—

Unsupported

Apple Safari

—

Unsupported

Microsoft Edge

84

Supported

Mobile Browser Engine Support

Chrome Android

84

Firefox Android

—

Safari iOS

—

Specifications and References

Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.LayoutShift ↗ api.LayoutShift.hadRecentInput ↗ api.LayoutShift.lastInputTime ↗ api.LayoutShift.sources ↗ api.LayoutShift.toJSON ↗ api.LayoutShift.value ↗ api.LayoutShiftAttribution ↗ api.LayoutShiftAttribution.currentRect ↗ api.LayoutShiftAttribution.node ↗ api.LayoutShiftAttribution.previousRect ↗ api.LayoutShiftAttribution.toJSON ↗