Bug 259478

Summary:

Weird scrolling behavior with JS-positioned sticky elements

Product:

WebKit

Reporter:

Jeroen Zwartepoorte <jeroen.zwartepoorte>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED INVALID

Severity:

Normal

CC:

bfulgham, simon.fraser, zalan

Priority:

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Safari reproduction	none
Chrome video	none

Jeroen Zwartepoorte

Reported 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.

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
View All Add attachment proposed patch, testcase, etc.

Jeroen Zwartepoorte

Comment 1 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.

Simon Fraser (smfr)

Comment 2 2023-07-25 09:20:53 PDT

Please provide the URL of the site on which you see this.

Jeroen Zwartepoorte

Comment 3 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.

Jeroen Zwartepoorte

Comment 4 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?

Simon Fraser (smfr)

Comment 5 2023-07-25 10:42:04 PDT

Does the page listen for scroll events and reposition content based on scrollY etc?

Jeroen Zwartepoorte

Comment 6 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).

Jeroen Zwartepoorte

Comment 7 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.

Simon Fraser (smfr)

Comment 8 2023-07-25 11:15:11 PDT

In webkit your scrollY values become negative when rubber banding, so you should clamp them to 0.

Simon Fraser (smfr)

Comment 9 2023-07-25 11:18:35 PDT

Improving compatibility in this area is tracked by bug 201556.

Jeroen Zwartepoorte

Comment 10 2023-07-25 11:19:38 PDT

Thanks, I think I know where to look then.

Jeroen Zwartepoorte

Comment 11 2023-07-25 11:31:15 PDT

Yep, I can confirm it's my own fault :) Closing as resolved/invalid.

Simon Fraser (smfr)

Comment 12 2023-07-25 11:50:36 PDT

It's a common issue. Even amazon.com does it.

Note You need to log in before you can comment on or make changes to this bug.