The hadRecentInput
read-only property of the LayoutShift
interface returns true
if lastInputTime
is less than 500 milliseconds in the past.
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.
Value
A boolean returning true
if lastInputTime
is less than 500 milliseconds in the past; false
otherwise.
Examples
The following example shows how the hadRecentInput
property is used to only count layout shifts without recent user input.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
console.log("LayoutShift value:", entry.value);
if (entry.sources) {
for (const { node, currentRect, previousRect } of entry.sources)
console.log("LayoutShift source:", node, {
currentRect,
previousRect,
});
}
}
}
});
observer.observe({ type: "layout-shift", buffered: true });
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
hadRecentInput |
77 |
79 |
No |
No |
64 |
No |
77 |
77 |
No |
55 |
No |
12.0 |
See also