[css-position-sticky][css-scroll-snap-align] scroll-snap does not work together with position: sticky
Categories
(Core :: Layout, defect, P3)
Tracking
()
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:
- Create a div with the css overflow: scroll and scroll-snap-type: x mandatory
- 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•5 years ago
|
||
Thanks for reporting! This looks indeed totally broken. :/
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.
Better example: https://codepen.io/Rogue75/pen/NWNjNoG
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.
Updated•2 years ago
|
Description
•