1978276 - www.aldi-onlineshop.de - Choppy scrolling on the products list

Status: RESOLVED WORKSFORME

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

Description

[Calin Tanase]

Environment:
Operating system: Android 15 / Windows 10
Firefox version: Firefox Mobile [phone]

Steps to reproduce:

1. Go to https://www.aldi-onlineshop.de/aktionen/
2. Scroll down the page.
3. Observe the behavior. (if the issue does not reproduce scroll all the way to the bottom of the page and then scroll up)

Expected Behavior:
The scroll is smooth.

Actual Behavior:
Scrolling is choppy/jumpy.

Notes:

• On Desktop reproduces when scrolling by click and dragging the scroll bar.
• 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/167175

Comment 1

[Calin Tanase]

Attachment: android Nightly vs Chrome.mp4

Comment 2

[Calin Tanase]

Attachment: Windows Nightly vs Chrome.mp4

Visibly reproducible on Desktop when scrolling by click and dragging the scroll bar.

Comment 3

[Daniel Holbert [:dholbert]]

I can repro. This feels like a contain-intrinsic-size / content-visibility bug, and indeed, I see this in the page's styles:

body.page-salesCampaignsPage .product-item {
	content-visibility: auto;
	contain-intrinsic-width: auto 170px;
	contain-intrinsic-height: 500px;
}

If I untick content-visibility:auto, then the issue goes away on desktop at least (and I assume on Android as well).

Comment 4

[Daniel Holbert [:dholbert]]

This reminds me a bit of bug 1832675 --> adding "see also".

I can currently reproduce something similar to this bug with testcase 2 from over there:
https://bug1832675.bmoattachments.org/attachment.cgi?id=9333208

Clicking-and-dragging the scrollbar just a little bit ends up taking me to the bottom of the page in Firefox, whereas in Chrome I don't reach the end of the page until I my cursor gets most of the way to the end. (In both cases, the scrollbar thumb moves out from under my cursor, but in a substantially more extreme way in Firefox.)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced)

Here's a testcase that reduces the jitter for me.

I'm also noticing that Chrome's substantially-better-experience here is in part related to them estimating a much taller height for the page than we do.

If I load this testcase on desktop and evaluate document.documentElement.scrollHeight in the web console:

• Firefox says 3718
• Chrome says 19706

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 7

[Daniel Holbert [:dholbert]]

testcase 2 is a pretty-substantially reduced testacse, which also reports the root element's scrollHeight on pageload (which you can also see visually by how long-or-short the scrollbar thumb is, which is an indication of how far there is to scroll).

For me on Desktop:

• Firefox reports scrollHeight at pageload: 842 (and shows a very large scrollbar-thumb, indicating we don't think there's much room to scroll)
• Chrome reports scrollHeight at pageload: 10586 (and shows a very small scrollbar thumb, indicating that it thinks there's quite a bit of room to scroll)

Comment 8

[Daniel Holbert [:dholbert]]

We could paper over this with a sitepatch that turns off content-visibility:auto here:

body.page-salesCampaignsPage .product-item {
  content-visibility: initial;
}

That should prevent the "have the browser guess how tall stuff is when it's offscreen" behavior that's causing us trouble here. (This sitepatch will probably make the page render a tiny bit slower, but it brings the benefit of having it be actually usable for now.)

I'll file a platform-bug in a bit, based on the attached testcases.

Comment 9

[Daniel Holbert [:dholbert]]

Filed bug 1979805 as the platform-bug here.

Comment 10

[Daniel Holbert [:dholbert]]

This seems to have been fixed by changes on the website's side.
Specifically:

• The URL in comment 0 no longer has any product-listing on it, so it's trivially unaffected.
• Other product listing pages like e.g. https://www.aldi-onlineshop.de/c/bestseller-9/ scroll just fine for me (no choppiness); and it does have elements with class="product-item", but there aren't any content-visibility: auto; styles that I can see that apply to these elements.