How to eliminate "Avoid Large Layout Shifts" for the below code?

Question

In lighthouse it shows avoid large layout shift for the following element:

<div id="HomeNewsEventsWrapper" class="section fixedheight1 introduction">

It shows avoid large layout shift even after setting width and height

<div id="HomeNewsEventsWrapper" class="section fixedheight1 introduction" style="width:375px;height:639px;">

How to fix the issue?

Barry Pollard · Accepted Answer · 2024-03-07 10:03:50Z

-1

A shifted element is often the victim of another element above it being inserted or changing size. So you need to figure out why this element shifted and fix that element from causing the shift to this element.

We’re looking at ways to report the probable cause more in Lighthouse but for now we just list the element shifted (as that’s how CLS is measured).

answered Mar 7, 2024 at 10:03

Barry Pollard

47k8 gold badges93 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to eliminate "Avoid Large Layout Shifts" for the below code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related