1551784 - [css-position-sticky][css-scroll-snap] Scroll-margin and position sticky targeted element doesn't execute scroll into view position correctly

Status: ASSIGNED

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

Description

[jonjohnjohnson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

1. Open test test -> https://jsbin.com/vicitap/edit?html,css,output
2. Scroll the page down 100px or so.
3. Click the "jump" text link in the center of the screen.
4. See how it scrolls to 100px or so further down than it should, not meeting the targets position.
5. Click the "jump" text that is in the middle of the paragraphs.
6. See how instead of scrolling back up the 100px or so, it actually scrolls down what would be the value of the targets 'scroll-margin-block-start'.
7. Scroll down to the bottom of the page and click the "jump" link there.
8. See how, now, it scrolls upwards what would be the value of the targets 'scroll-margin-block-start'.

Actual results:

By clicking all the different "jump" links in the page, which have the same target, the page scrolls down or up the full value of the 'scroll-margin-block-start' declaration on the target, no matter how far out of view the targeted element is currently scrolled.

Expected results:

Clicking any "jump" text link should always resolve the scroll position so that the grey boxes bottom pink border rests to meet the top of the scrollport.

Comment 1

[jonjohnjohnson]

Attachment: Screencast showing steps described in filing

Comment 2

[jonjohnjohnson]

Hiro! My hero!

I see you added that this blocks css-scroll-snap, but wanted to make sure I was clear that in my perception this case might mostly be about position:sticky interactioning with scroll into view on top of the scroll-margin properties from scroll-snap.

Also see https://github.com/w3c/csswg-drafts/issues/1459

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Daniel Holbert [:dholbert]]

hiro is probably best person to set priority, as the assignee.

Comment 5

[jonjohnjohnson]

Attachment: Shows bug with actual snapping, not just SIV/scroll-margin

When scrolling this demo horizontally in gecko, compared to blink, you can see how snap and scroll-margin aligned elements aren't understood correctly when those elements are also using position sticky. It's easy to see the broken behavior in both the physics of momentum scrolling and the resolution of the snap alignments being off.

If you remove the two different declarations of position: sticky in the styles, though the elements won't visually line up like intended, the snap alignments and the scroll snapping physics behave as expected.

This might be a better all around test case than the originally linked document, because it also shows scroll snapping, not just snap-align.

Comment 6

[vincent.humeau]

I noticed on vertical snap scroll with position sticky that snap scroll only work going down the page. Works as expected on other browsers.

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

Comment 7

[Daniele "Mte90" Scasciafratte]

I can confirm that this bug is still present but just only on Firefox for Android.

With this codepen https://codepen.io/xeniun/pen/MWoymwp that is a copy of the real webpage with the issue, clicking on Index->Title 1 as example from Android you will see that the position is wrong.

Instead if you use Firefox with the same viewport from desktop the problem is not happening.

Comment 8

[jonjohnjohnson]

I'm not sure to what exactly comments 6 and 7 are referring, but if anything, they are tangential to the original issue, which is still not working correctly in firefox regardless of platform.

This issue is about scroll-margin not having the correct effect on elements that also use position:sticky, for any/all scroll targetting.