Bug 272799 - scroll-padding causes unwanted scroll on sticky elements
Summary: scroll-padding causes unwanted scroll on sticky elements
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 17
Hardware: All Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-04-16 20:21 PDT by mic.gallego
Modified: 2024-04-17 14:09 PDT (History)
3 users (show)

See Also:

Attachments
Scrolling bug (893.53 KB, video/quicktime)
2024-04-16 20:21 PDT, mic.gallego 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>