Bug 259478 - Weird scrolling behavior with JS-positioned sticky elements
Summary: Weird scrolling behavior with JS-positioned sticky elements
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-07-25 07:32 PDT by Jeroen Zwartepoorte
Modified: 2023-07-25 11:50 PDT (History)
3 users (show)

See Also:


Attachments
Safari reproduction (529.13 KB, video/quicktime)
2023-07-25 07:32 PDT, Jeroen Zwartepoorte
no flags Details
Chrome video (855.32 KB, video/quicktime)
2023-07-25 07:33 PDT, Jeroen Zwartepoorte
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jeroen Zwartepoorte 2023-07-25 07:32:58 PDT
Created attachment 467114 [details]
Safari reproduction

When you scroll down when the page is already at the top of the viewport, sticky elements behave weirdly. See the video. They are dragged down as well.
Comment 1 Jeroen Zwartepoorte 2023-07-25 07:33:50 PDT
Created attachment 467115 [details]
Chrome video

Chrome behaves correctly: the page does move down, but the contents in the page does not move.
Comment 2 Simon Fraser (smfr) 2023-07-25 09:20:53 PDT
Please provide the URL of the site on which you see this.
Comment 3 Jeroen Zwartepoorte 2023-07-25 09:28:36 PDT
I'm not a public accessible website unfortunately. I'm trying to create a codepen of the issue, but having no luck so far.
Comment 4 Jeroen Zwartepoorte 2023-07-25 09:42:54 PDT
@smfr I can't reproduce it in a codepen. Any chance you're willing to live debug this via a call?
Comment 5 Simon Fraser (smfr) 2023-07-25 10:42:04 PDT
Does the page listen for scroll events and reposition content based on scrollY etc?
Comment 6 Jeroen Zwartepoorte 2023-07-25 11:05:10 PDT
Yes it listens for scroll events and it toggles an attribute based on scrollY (to add a box-shadow when something becomes stuck).
Comment 7 Jeroen Zwartepoorte 2023-07-25 11:05:42 PDT
The element it toggle the stuck attribute on is the same element that is "misbehaving" in the video.
Comment 8 Simon Fraser (smfr) 2023-07-25 11:15:11 PDT
In webkit your scrollY values become negative when rubber banding, so you should clamp them to 0.
Comment 9 Simon Fraser (smfr) 2023-07-25 11:18:35 PDT
Improving compatibility in this area is tracked by bug 201556.
Comment 10 Jeroen Zwartepoorte 2023-07-25 11:19:38 PDT
Thanks, I think I know where to look then.
Comment 11 Jeroen Zwartepoorte 2023-07-25 11:31:15 PDT
Yep, I can confirm it's my own fault :)

Closing as resolved/invalid.
Comment 12 Simon Fraser (smfr) 2023-07-25 11:50:36 PDT
It's a common issue. Even amazon.com does it.