scrollTop is broken with CSS Scroll Snap
Categories
(Core :: Layout: Scrolling and Overflow, defect)
Tracking
()
People
(Reporter: alexander, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Steps to reproduce:
Here's the reproduction:
https://codepen.io/waterplea/pen/JjrXwMY
I'm making a CSS based mobile draggable sheet component. I used CSS scroll snap to make minified and expanded modes. You can swipe scroll it and it would snap as either small panel at the bottom of the screen or it will be displayed fullscreen.
You can view this Codepen in Chrome to see the expected behavior. CSS works as expected in Firefox, except for a little issue of not snapping to the initial minified mode upon load (that's minor). But if I want to programmatically scroll to those snap points it breaks in Firefox.
I suppose it breaks due to a slightly bit complex layout but it really isn't that complex, just a display: flex wrapper for the blocks that correspond to snap points.
Once again, works like charm in Chrome so you can test this pen there to see what is expected.
Actual results:
Scrolling to 80px which is the minified mode scrolls all the way to the top (essentially 400px)
Expected results:
It should scroll to 80px
|
||
Comment 1•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
|
||
Comment 2•4 years ago
|
||
The severity field is not set for this bug.
:TYLin, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Comment 3•4 years ago
|
||
Hiro, this is related to scroll-snap. Could you help set the severity?
|
||
Comment 4•4 years ago
|
||
This is because that a snap point in question is on ".bumber" and the element size is 0x1, which means the element is gong to be checked by this condition.
I don't immediately see any spec documents about empty sized elements. From users perspective, snap positions on invisible and not-affecting layout elements look odd to me. But it's just my opinion.
Thank you for pointing this out, I could've sweared I tried giving it some width :) So only "not snapping to the initial minified mode upon load (that's minor)" remains. Also I noticed that momentum scroll works very badly with snap points when you reach the end. There's a loooong delay until snap as if it was still scrolling until the momentum is gone and only then it snaps. But that's probably another story and maybe this one can be closed.
Description
•