Table of Contents

Class LayoutShift

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll
NOTE
Experimental
The LayoutShift interface of the Performance API provides insights into the layout stability of web pages based on movements of the elements on the page. 
[Value("LayoutShift")]
public class LayoutShift : PerformanceEntry
Inheritance
LayoutShift
Inherited Members

Remarks

-LayoutShiftAttribution
-CLS

See also on MDN

Constructors

LayoutShift() 

public LayoutShift()

Properties

HadRecentInput

NOTE
Experimental
The hadRecentInput read-only property of the LayoutShift interface returns true if LastInputTime is less than 500 milliseconds in the past. 
[Value("hadRecentInput")]
public bool HadRecentInput { get; }

Property Value

bool

A boolean returning true if LastInputTime is less than 500 milliseconds in the past; false otherwise.

Remarks

Layout shifts are only a problem if the user is not expecting them, so layout shifts that are the result of user interactions (such as a user expanding a UI element) are often not considered in layout shift metrics. The hadRecentInput property allows you to exclude these shifts.

-LastInputTime

See also on MDN

LastInputTime

NOTE
Experimental
The lastInputTime read-only property of the LayoutShift interface returns the time of the most recent excluding input or 0 if no excluding input has occurred. 
[Value("lastInputTime")]
public Number LastInputTime { get; }

Property Value

Number

A Number indicating the most recent excluding input time or 0 if no excluding input has occurred.

Remarks

Layout shifts are only bad if the user wasn't expecting them. Layout shift metrics like CLS exclude shifts that occurred soon after certain user interactions. These interactions are called excluding inputs. Excluding inputs are:

The mousemove and pointermove events are not excluding inputs.

-HadRecentInput

See also on MDN

Sources

NOTE
Experimental
The sources read-only property of the LayoutShift interface returns an array of LayoutShiftAttribution objects that indicate the DOM elements that moved during the layout shift. 
[Value("sources")]
public LayoutShiftAttribution[] Sources { get; }

Property Value

LayoutShiftAttribution[]

An {{jsxref("Array")}} of LayoutShiftAttribution objects. This array will not contain more than five sources. If there are more than five elements impacted by the layout shift, the five most impactful elements are reported.

Remarks

-LayoutShiftAttribution

See also on MDN

Value

NOTE
Experimental
The value read-only property of the LayoutShift interface returns the layout shift score calculated as the impact fraction (fraction of the viewport that was shifted) multiplied by the distance fraction (distance moved as a fraction of viewport). 
[Value("value")]
public Number Value { get; }

Property Value

Number

A number between 0.0 and 1.0 indicating the layout shift score.It is calculated as the impact fraction (fraction of the viewport that was shifted) multiplied by the distance fraction (distance moved as a fraction of viewport).For more details, see Layout shift score on web.dev.

Remarks

See also on MDN

Methods

ToJSON()

NOTE
Experimental
The toJSON() method of the LayoutShift interface is a {{Glossary("Serialization","serializer")}}; it returns a JSON representation of the LayoutShift object. 
[Value("toJSON")]
public Object ToJSON()

Returns

Object

A {{jsxref("JSON")}} object that is the serialization of the LayoutShift object.

Remarks

-JSON

See also on MDN

Edit this page