Bug 106062 – Nested sticky position elements incorrectly repositioned on scrolling

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Beth Dakin]

Nested sticky position elements do not always reposition properly on scroll in today's TOT. See attached test case. The inner object scrolls correctly up until the point when it is supposed to "stick" and then it starts doing the wrong thing. 

See related: https://bugs.webkit.org/show_bug.cgi?id=105475 and http://trac.webkit.org/changeset/138758

[Beth Dakin]

Created attachment 181247 [details]
Test case

[Radar WebKit Bug Importer]

<rdar://problem/12954040>

[jonjohnjohnson]

I've discovered an example of "nested sticky scrolling elements" that does behave/paint seamlessly in Safari, but cannot figure out why your original test case is still buggy.

http://output.jsbin.com/nibenel/1

[jonjohnjohnson]

Seems to only be an issue when scrolling the documentElement.

[jonjohnjohnson]

Created attachment 358139 [details]
Difference in nested sticky positioning for viewport and internal scrolling

Left side, scrolls internal fixpos scroll container
Right side, scrolls viewport/root scroll container

Right side only positions nested sticky position element when relayout is forced, (resizing window or scrolling fixed element will kick it into gear) instead of positioning correctly while scrolling itself.

Easy to see differences when scrolling case in current version of blink.

[jonjohnjohnson]

Also, hoping when this gets fixed that the left side internal scroller of this test case...

https://bugs.webkit.org/attachment.cgi?id=358139

...doesn't exhibit jittering when it's outer sticky el is stuck but nested sticky el is still unconstrained (in flow), like currently seen on iOS Safari. Seems like the hardware accelerated scrollers are having issues talking back n forth with frame rate offset position. :/

[Simon Fraser (smfr)]

This seems to work fine now.

[jonjohnjohnson]

(In reply to Simon Fraser (smfr) from comment #7)
> This seems to work fine now.

Can you share with us which version of macOS/iOS Safari you are using, because when I load this link in iOS 12.3.1 Safari...

https://bugs.webkit.org/attachment.cgi?id=358139

...the scroller on the right doesn't work fine. That's the viewport/root scroller and it sadly seems to require a relayout to get the inner sticky offset to behave correctly.

I've commented on this twice above and it's always discouraging when comments are seemingly ignored when one takes their time to try and help aid in remedying your bugs. :(

[Simon Fraser (smfr)]

Sorry, I should have clarified. I tested in Safari Tech Preview 86.

This seems fixed on desktop safari 14, but on iOS 14.0.1 the test case still exhibits the samme buggy / laggy update for the viewport scrolling nested sticky elements - a noticeable delay to the sticking behaviour on the nested sticky element. The nested sticky element only get's the correct position when momentum scroll of the viewport comes to a halt.