Bug 231953 - Element with position: sticky after sticking, starts to move incorrectly when scrolling
Summary: Element with position: sticky after sticking, starts to move incorrectly when...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad Other
: P2 Major
Assignee: Simon Fraser (smfr)
Keywords: InRadar
: 235576 (view as bug list)
Depends on:
Reported: 2021-10-19 07:26 PDT by p_stas1997
Modified: 2022-05-16 15:36 PDT (History)
11 users (show)

See Also:

Video (466.54 KB, video/mp4)
2021-10-19 07:26 PDT, p_stas1997
no flags Details
Testcase (905 bytes, text/html)
2021-11-09 03:31 PST, Martin Robinson
no flags Details
Screenshot (126.56 KB, image/png)
2021-12-02 22:21 PST, p_stas1997
no flags Details
Testcase2 (1.07 KB, text/html)
2021-12-15 02:34 PST, Bruno Stasse
no flags Details
Video_testcase2 (5.42 MB, video/mp4)
2021-12-15 02:35 PST, Bruno Stasse
no flags Details
Patch (9.77 KB, patch)
2022-03-03 16:54 PST, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description p_stas1997 2021-10-19 07:26:00 PDT
Created attachment 441720 [details]

Element with position: sticks after sticking, starts to move incorrectly when scrolling.
Check it https://jsfiddle.net/vne3zx7s/4/
iOS 15.0.2
Comment 1 p_stas1997 2021-10-19 07:29:45 PDT
Attached video, watch it
Comment 2 Radar WebKit Bug Importer 2021-10-26 07:26:17 PDT
Comment 3 Martin Robinson 2021-11-09 03:31:32 PST
Created attachment 443675 [details]
Comment 4 Martin Robinson 2021-11-09 03:37:22 PST
Hi! Thanks for reporting this issue. It's a bit hard to see what is going wrong in the video. Would you mind explaining in what way the sticky element is moving incorrectly?
Comment 5 p_stas1997 2021-12-02 22:21:58 PST
Created attachment 445810 [details]
Comment 6 p_stas1997 2021-12-02 22:24:31 PST
(In reply to Martin Robinson from comment #4)
> Привет! Спасибо, что сообщили об этой проблеме. Сложно увидеть, что не так
> на видео. Не могли бы вы объяснить, как неправильно движется липкий элемент?

Hi! See attached screenshot. Pointed out the problem and pointed timecode.
Comment 7 Bruno Stasse 2021-12-15 02:34:06 PST
Created attachment 447214 [details]

I am also experiencing this issue on iOS 15.2. Note that I started seeing it since iOS 15. It did not happen before, so this should probably be considered a REGRESSION. As far as I can tell it only affects iOS, not macOS.

It is very problematic as elements with position: sticky do not move correctly with the scroll, they are late compared to other elements, creating jank. This makes for a very poor experience.

I created a new testcase where I think the problem is more visible. See Testcase2 and Video_testcase2.

While scrolling up and down inside the scroll container, you should only see yellow inside (the color of the spacers elements and the sticky element). What actually happens is that you see the scroll container red background because the element with position: sticky is not correctly painted at the position it should be, revealing the background.
Comment 8 Bruno Stasse 2021-12-15 02:35:54 PST
Created attachment 447215 [details]
Comment 9 Bruno Stasse 2021-12-15 02:43:42 PST
Observation: sorry for the multiple comments, I just noticed that the problem only seems to be happening after the element has sticked (been fixed to the viewport) once, it does not happen before that.
Comment 10 Bruno Stasse 2021-12-17 02:00:59 PST
Additional observations:

- The problem does not occur with page/body scroll, only inside element scroll containers.

- The sticky element is only late to be positioned when scrolling in the direction of the side it has been last stuck on. In Testcase2, as the element has `top: 0`, it is only late to be positioned when scrolling to the top, and therefore only shows the scroll container red background above it. If you add the rule `bottom: 0`, you will see that it has the opposite behaviour. After sticking to the bottom, the scroll container red background will appear below it.

This bug makes `position: sticky` pretty unusable on iOS inside element scroll containers. It would be great if it could be fixed quickly so it doesn't affect another iOS version. In the meantime, if anyone find a workaround for iOS 15 to 15.2, please share!
Comment 11 Simon Fraser (smfr) 2022-02-22 14:35:04 PST
For some reasons the UI-side positioning of the sticky layer isn't matching the scrollview motion.
Comment 12 Simon Fraser (smfr) 2022-02-24 16:17:17 PST
I can reproduce on macOS too.
Comment 13 Simon Fraser (smfr) 2022-02-24 17:26:58 PST
Things seem to only go bad after you hit the start or and and rubberband.
Comment 14 Simon Fraser (smfr) 2022-02-25 11:42:39 PST
I believe the issue here is that in a given scrolling tree commit, we update the scrolling node for the overflow scroll with a new scroll position, but fail to update the sticky viewport constraints on the sticky node, so that "last committed scroll position" on the scrolling node, and "constraining-rect-at-last-layout" on the sticky node get out of sync.
Comment 15 Simon Fraser (smfr) 2022-02-25 11:43:14 PST
And that happens because ScrollingNodeChangeFlags::LayerGeometry is not set for the sticky node.
Comment 16 Simon Fraser (smfr) 2022-03-03 16:54:09 PST
Created attachment 453796 [details]
Comment 17 EWS 2022-03-03 18:55:11 PST
Committed r290812 (248048@main): <https://commits.webkit.org/248048@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 453796 [details].
Comment 18 Simon Fraser (smfr) 2022-04-11 10:39:41 PDT
*** Bug 235576 has been marked as a duplicate of this bug. ***
Comment 19 Sam Sneddon [:gsnedders] 2022-05-16 15:36:22 PDT
Just to let everyone know, for those who care about Safari, the fix for this has shipped in Safari 15.5.