Open Bug 1792174 Opened 2 years ago Updated 1 year ago

Scrolling breaks when scroll-padding is more than half the container size with snapping

Categories

(Core :: Layout: Scrolling and Overflow, defect, P3)

Product:
Core
Component:
Layout: Scrolling and Overflow
Version:
Firefox 105
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: dev, Unassigned)

References

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Steps to reproduce:

  • I created a div with width 500px and height 200px, and filled it with divs with width 200px.
  • I set up a flex-box with overflow so that it becomes scrollable horizontally.
  • I set the boxes scroll-snap-align to start.
  • I set scroll-snap-type to x mandatory
  • I set the scroll-padding to 150px.

The intention is that the boxes snap so the align with the center. In this case this can be done using scroll-snap-align: center, but this method should probably work as well.

Also tested in nightly (107.0a1)

Example: https://codesandbox.io/s/pedantic-knuth-icqo9q

Actual results:

Scrolling breaks to the extent that only dragging the scroll bar or (middle-mouse) dragging the area works. Nudging (arrow keys or left/right on scroll bar) or programmatically scrolling breaks.

Using scroll-padding-inline rather than scroll-padding fixes the issue, therefore there seems to be some interaction where the snap area becomes invalid. Even though the problematic axis (vertical) is different from the one which requires snapping (horizontal). Chrome resolves this by creating a zero-sized snap area, aligning with the start (left/top) scroll-padding.

Additionally, the size of the boxes to snap to appears relevant, increasing the width further doesn't fix the issue, but allows limited scrolling.

Expected results:

Scrolling should have kept working as normal, including snapping.

Component: Untriaged → Layout: Scrolling and Overflow
Product: Firefox → Core
Summary: Scrolling breaks when scroll-padding is more than half the container size. → Scrolling breaks when scroll-padding is more than half the container size with snapping

Hiro, can you look when you have the time?

Flags: needinfo?(hikezoe.birchill)

I naively thought that just ignoring scroll-padding properties on unscrollable directions (I suppose that's the Chrome's behavior) would solve this, but it looks like Safari has a different behavior. So I raised a spec issue; https://github.com/w3c/csswg-drafts/issues/7810

Severity: -- → S3
Flags: needinfo?(hikezoe.birchill)
Priority: -- → P3
See Also: → https://github.com/w3c/csswg-drafts/issues/7810
Duplicate of this bug: 1806848
You need to log in before you can comment on or make changes to this bug.