1985980 - www.lovisa.co.uk - Scrolling is broken

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Linux
Firefox version: Firefox 144.0

Steps to reproduce:

1. Navigate to: https://www.lovisa.co.uk/collections/flat-backs?filter=material-silver%2Cstainless_steel%2Csterling_silver%2Csurgical_steel%2Ctitanium&page=1
2. Dismiss the pop-ups
3. Scroll and observe

Expected Behavior:
Scrolling is not broken

Actual Behavior:
Scrolling the page is broken

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/173773

Comment 1

[Raul Bucata]

Attachment: Chr vs FF

Comment 2

[Dennis Schubert [:denschub]]

This happens when you scroll all the way to the bottom and then back up, at which point it horribly breaks. I don't think this is a layout issue, and probably more like an IntersectionObserver doing exciting things?

Comment 3

[Keith Cirkel [:keithamus]]

Attachment: lovisa-scroll-bug.mp4

I can avoid triggering the effect if I do not place my cursor over any of the product images. Scrolling the page with my cursor down one of the page margins seems to avoid the issues, and hovering over one of the images will snap the scroll position back. I can intentionally trigger the snapping by scrolling the page and forcing a :hover pseudo on product-card__image from within devtools. This suggests to me there are some CSS rules that are causing this effect but I have investigated the CSS and I'm coming up empty.

Also it looks like the website is using this library: https://github.com/yowainwright/stickybits/releases/tag/3.7.9. This seems like a likely candidate for these issues.

Comment 4

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Keith Cirkel [:keithamus] from comment #3)

Created attachment 9512335 [details]
lovisa-scroll-bug.mp4

I can avoid triggering the effect if I do not place my cursor over any of the product images. Scrolling the page with my cursor down one of the page margins seems to avoid the issues, and hovering over one of the images will snap the scroll position back. I can intentionally trigger the snapping by scrolling the page and forcing a :hover pseudo on product-card__image from within devtools. This suggests to me there are some CSS rules that are causing this effect but I have investigated the CSS and I'm coming up empty.

Also it looks like the website is using this library: https://github.com/yowainwright/stickybits/releases/tag/3.7.9. This seems like a likely candidate for these issues.

We're having a hard time to move further from comment 13. Blocking the meta hard-to-diagnose, and in the meanwhile, we plan to do outreach to see (and hopefully) if we can get other hints from the site developers.

Comment 5

[Alice0775 White]

Workaround, see Bug 1998156 Comment 4

Comment 6

[Alice0775 White]

Attachment: half-reduced.html

Comment 7

[Alice0775 White]

Regression window using half-reduced.html :
The layout is quite broken, but the scroll position jump back when mouse hover.
https://hg-edge.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=838a7d98c1d4&tochange=5dcb38c7f1b8

Tentatively, mark Bug 1187851 as regressor.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1187851

:dbaron, since you are the author of the regressor, bug 1187851, could you take a look?

For more information, please visit BugBot documentation.

Comment 9

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Alice0775 White from comment #7)

Regression window using half-reduced.html :
The layout is quite broken, but the scroll position jump back when mouse hover.
https://hg-edge.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=838a7d98c1d4&tochange=5dcb38c7f1b8

Tentatively, mark Bug 1187851 as regressor.

Thank you so much for the test case and the regression window. I removed the needs-contact keyword and the dependency on the hard-to-diagnose meta. Also moving this to layout team's radar based on the regressor.

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (more reduced)

Here's a more-reduced testcase (still could use some further reducing).

Comment 11

[Daniel Holbert [:dholbert]]

testcase 2 is just from incremental deletion in Alice0775's earlier testcase.

STR for testcase 2:
(1) Scroll down to near the end.
(2) Reload the page (Ctrl+R). Hopefully it remains scrolled to near the end.
(3) Hover the content.

ACTUAL RESULTS:
When you hover the content, the scroll position suddenly changes, and different content appears onscreen -- the top of the product grid with "Products Per Page" and the photo of the lady wearing a red shirt.
At that point if I try to scroll up, there's a ton of empty scrollable space above the content.

EXPECTED RESULTS:
No such scroll issues.

With this testcase, I'm seeing a much further back regression range:
https://hg-edge.mozilla.org/mozilla-central/pushloghtml?fromchange=ab4ccf3d6b60&tochange=803189f35921

I think the relevant change in there is " Bug 902992 - Enable position:sticky in non-release builds (e.g. Nightly and Aurora)".

Given that, I suspect this is a version of bug 1781297.

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1187851