GoogleChrome / GoogleChrome/lighthouse

Layout shift reported without actual visual shifting for resized fixed iframe

Open
#11,431 1 comment 1 reaction 0 assignees View on GitHub
P2 upstream-action-required
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

#### Provide the steps to reproduce

Create a fixed iframe that is being resized with an element with it that has also a fixed positioning to stick it to the right edge.

![screencast 2020-09-14 12-06-54](https://user-images.githubusercontent.com/9800850/93074829-347e5800-f685-11ea-8715-c3a945468441.gif)

The border has been added on the outer element to visualize what is changing (the fixed container of the iframe on the page).

#### What is the current behavior?

CLS is being reported.

#### What is the expected behavior?

No CLS should be reported here - there is no visual effect for the user.

I understand that the use case here is very specific, but it shows that the current heuristics do not account for more complex scenarios. It's not sufficient to compute the layout shift of the element in relation to its viewport - the computation should account for nested frames.

Contributor guide

Open the contributing guide

Research direction

No source file or test is named. Start by reproducing the fixed, resizing iframe case and trace how layout shifts are attributed across the nested frame. Done means this case no longer reports CLS when there is no visual effect for the user.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.