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

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[[e-mail]]

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

Comment 1

[Hiroyuki Ikezoe (:hiro)]

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

Comment 2

[Hiroyuki Ikezoe (:hiro)]

I will have a look once I can get time.

Comment 3

[Davbog]

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.

Comment 4

[Davbog]

Better example: https://codepen.io/Rogue75/pen/NWNjNoG

Comment 5

[contact]

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.

Comment 6

[s7uart]

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.