Open Bug 1594386 Opened 5 years ago Updated 2 years ago

[css-position-sticky][css-scroll-snap-align] scroll-snap does not work together with position: sticky

Categories

(Core :: Layout, defect, P3)

71 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: gundersen, Unassigned, NeedInfo)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

  1. Create a div with the css overflow: scroll and scroll-snap-type: x mandatory
  2. create several divs inside with position: sticky, left: 0 and scroll-snap-align: start
    3 scroll the outer div

A demo can be found here: https://cascading-hamburger-menu.mariusgundersen.net/

Actual results:

The scrolling behaves buggy, sometimes stopping between snap points, sometimes not scrolling at all. Removing position: sticky from the css makes it behave as intended

Expected results:

It should scroll to the snap points

Component: Untriaged → Layout
Product: Firefox → Core

Thanks for reporting! This looks indeed totally broken. :/

Priority: -- → P3

I will have a look once I can get time.

Flags: needinfo?(hikezoe.birchill)

I have this same issue.
It's very evident when scrolling with the arrow keys. Down works 1-5, but around 3 o 4, up no longer works. Scroll wheel on a mouse has the same effect.

https://codepen.io/vinceumo/pen/aboYLBW

Thanks ahead of time to whoever can fix this.

I have a similar issue manifesting itself in different way. Demo: https://codepen.io/joezimjs/pen/MWvYMGG?editors=1100

There are some good instructions on how to recreate the issue within the demo. This is a table with a couple sticky columns and the rest scroll left/right and should stick at the column borders.

I have a fix for this which can be seen on my website http://www.istu.co.uk slideshows 04 and 05.
It's a shame that Firefox has known about this for 3 years and it is not yet fixed.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.