Bug 272799

Summary:

scroll-padding causes unwanted scroll on sticky elements

Product:

WebKit

Reporter:

mic.gallego

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

karlcow, simon.fraser, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

All

OS:

Unspecified

Attachments:

Description	Flags
Scrolling bug	none

Description mic.gallego 2024-04-16 20:21:25 PDT

Created attachment 470952 [details]
Scrolling bug

Hi,

A common way to have the anchor scroll works well with sticky element is to add a scroll-padding-top on the HTML to account for the sticky elements. Unfortunately, on Safari and Chrome (Firefox works as expected), this cause an unwanted scroll when using a sticky element.

To reproduce the issue:

1. Open the pen: https://codepen.io/bakura10/pen/QWPVYEE
2. Scroll lower into the page.
3. Focus one of the link in the sticky bar, and you will see that the page will scroll up automatically. This only happens for sticky element. If the positioning is changed to fixed, it works as expected.

Please see the attached video for more details. I am cross-posting this issue on Chrome bug-tracker as well.

Comment 1 Radar WebKit Bug Importer 2024-04-17 14:09:53 PDT

<rdar://problem/126643678>