search

WICG / layout-instability

A proposal for a Layout Instability specification
https://wicg.github.io/layout-instability/
Other
159 stars 27 forks source link

CLS issue caused by FIXED position elements having z-index #87

Closed rockeynebhwani closed 3 years ago

rockeynebhwani commented 3 years ago

Chrome Version - Version 88.0.4324.41 (Official Build) beta (64-bit)

Steps to re-produce

  1. Go to https://direct.asda.com/george/women/dresses/D1M1G20C1,default,sc.html

  2. If you are shown a cookie banner, click 'accept all'

  3. Now do a hard refresh of the page (Ctrl+R)

  4. Ignore any CLS at this stage as we are interested in CLS caused after initial load when we scroll (00:11 Sec marker in video below.. I clear any CLS observed from hard refresh)

  5. Start scrolling down slowly and observe layout shifts in console (00:13 Sec marker in video below) const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!(entry.hadRecentInput)){ console.log(entry); } } }); po.observe({type: 'layout-shift', buffered: true});

  6. You will see element div.refinements__footer.zerorefinements appearing again and again as you scroll.

  7. This element is not at all visible to user at this stage and there is no visible layout shift happening for the user. In attached video, to show this element, I have added border and border-colour. This element appears when you click on 'FILER' button and select any refinement values. You will see a button called 'View Items'. This DIV wraps that button.

I have recorded these steps in video below...

https://www.awesomescreenshot.com/video/2073259?key=28541cc1d1868898871719364840a842

I see that in Chrome88 change log there is a change with respect to 'fixed position elements'. I wonder if what I am seeing is some sort of regression due to this change OR correct behaviour as per metric specs... If yes, what is the expectation from devs to fix such issues?

image

@philipwalton @anniesullie @patrickhulce

I tried same steps on Version 85.0.4183.121 (Official Build) (64-bit) and I don't see these layout shifts on this version

anniesullie commented 3 years ago

The specific issue of div.refinements__footer.zerorefinements causing layout shifts was fixed in this chromium CL, which was merged to the 88 branch. So this is no longer seen starting from Chrome 88.0.4324.50 as well as 89.0.4354.0.

So I think this issue should be closed.

If you have concerns about other layout shifts seen on the page in the most recent canary build, please file a chromium bug at crbug.com --that way we can more easily dig into whether it's a chromium implementation bug or a specification issue, and we'll file here if there's a specification issue.

rockeynebhwani commented 3 years ago

Thanks @anniesullie. I can confirm that this has been fixed in Chrome 88.0.4324.50 but I am still seeing some other shifts which look like non customer impacting.. I will have a closer look and raise on crbug.com if I think these are false positives.