1850485 - The carousel scrolling is glitchy on apple.com, with `scroll-snap-type` (scroll position resets to start position, after scrolling to end position)

Status: NEW

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

Description

[Calin Tanase]

Attachment: navigation FF vs Chrome.mp4

Environment:
Operating system: Windows 10
Firefox version: Nightly 119.0a1 (2023-08-28)

Preconditions:
• Must be logged in

Steps to reproduce:

1. Go to https://secure6.store.apple.com/shop/account/home
2. Click on the navigation arrows "<, >" located on the carousels from devices/apple account balance.

Expected Behaviour:
The navigation animation is glitchy.

Actual Behaviour:
The navigation animation works correctly.

Notes:

1. Screen rec provided
2. Reproducible on Firefox Release as well
3. Not reproducible on Chrome
4. Issue found during WebCompat team [Top100] websites testing

Comment 1

[Raul Bucata]

Verified this issue and still reproduces on Firefox 122 and 124.

Tested with:

Browser / Version: Firefox Release 122.0.1 (64-bit)/ Firefox Nightly 124.0a1 (2024-02-14) (64-bit)
Operating System: Windows 10 PRO x64

Comment 2

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

I can reproduce.

This has something to do with scroll-snap (the bug goes away if I untick their scroll-snap-type styling), and it also seems to be dependent on the viewport size (the bug goes away if I make my viewport <= 1323px wide; i.e. viewports >= 1324px reproduce the issue for me).

Comment 3

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

Attachment: screencast showing DevTools when the bug reproduces, and impact of viewport size and `scroll-snap-type` on reproducibility

Comment 4

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

I spun off bug 1899380 with a reduced testcase for one issue that I came up with while poking at this, related to this CSS rule:

    .rs-account-scroller-item:first-child>div {
      margin-inline-start: calc(50vw - 490px);
    }

The vw unit usage seems to be at least partly responsible for the viewport-size relevancy that I mentioned in comment 2, but there might be more going on as well. In particular, if I disable that CSS decl entirely, then the bug still reproduces, and it reproduces at smaller viewport sizes. (With that declaration disabled, the bug stops repro'ing when I reach 1237px viewport-width, I think. 1238px reproduces the bug.) So I'm guessing there are other fractional offsets involved that might still be triggering the same underlying issue that I captured in bug 1899380, but I'm not entirely sure.

Comment 5

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

(In reply to Daniel Holbert [:dholbert] from comment #4)

So I'm guessing there are other fractional offsets involved that might still be triggering the same underlying issue that I captured in bug 1899380, but I'm not entirely sure.

Hmm, I can still reproduce this bug here on Apple.com, using the "last-good" build from the perspective of bug 1899380 (Nightly 2023-03-23). So there does indeed seem to be more going on here than just that one bug.

Comment 6

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

I can reproduce this bug at least as far back as Nightly 2020-01-25 (v74.0a1) on the actual Apple site. (In that Nightly, the > button doesn't show up for some reason which makes the STR slightly harder to perform, but I can still find and click the button by hovering the area where I expect it to be. And when I do, I see the same bug happening as captured in the attached screencasts; the carousel animates and then resets.)

This can't be easily tested in builds much older than that, because the login splash page won't properly load (its DOM is left in a stub kind of state) in earlier builds, e.g. 2020-01-15, so I can't reach the page in question where this bug here would reproduce. But in any case, it's useful to know that the underlying issue seems to go back a ways.

Comment 7

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

Note: the about:config pref layout.scroll.disable-pixel-alignment doesn't seem to help here (I can still reproduce this bug after setting that pref to true).

(Whereas that pref does seem to help with bug 1899380, the one that I spun off.)

Comment 8

[Daniel Holbert [:dholbert] (mostly-away until Aug 19)]

(In reply to Daniel Holbert [:dholbert] from comment #2)

it also seems to be dependent on the viewport size (the bug goes away if I make my viewport <= 1323px wide; i.e. viewports >= 1324px reproduce the issue for me).

This^ threshold was for the "Your Apple Account | Your Orders | ..." section shown in comment 3.

I can reproduce the bug for the "Your Devices" carousel above that as well, though it's got a slightly lower threshold there -- the issue reproduces in that section IFF my viewport is >= 1090px wide.

So:

• for viewport-width between 1090px and 1323px (inclusive), I can reproduce the issue in the upper carousel but not the lower carousel.
• for viewport-width above 1324px, I can reproduce it in both carousels (up to the point at which the arrow buttons disappear due to being unnecessary).