Bug 179379 - scroll-padding should affect scrollIntoView, paging etc even when snapping is off
Summary: scroll-padding should affect scrollIntoView, paging etc even when snapping is...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2017-11-07 10:49 PST by Simon Fraser (smfr)
Modified: 2020-07-30 15:36 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Fraser (smfr) 2017-11-07 10:49:07 PST
See https://drafts.csswg.org/css-scroll-snap/#scroll-padding
Comment 1 Radar WebKit Bug Importer 2020-04-16 18:52:02 PDT
<rdar://problem/61915456>
Comment 2 Diane Ko 2020-07-30 15:24:57 PDT
From the CSS spec definition for scroll-padding (https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding), scroll-padding should apply to any scroll container, not just scroll snap containers. This issue is particularly problematic when using scroll-padding to adjust for any fixed content (for example, a fixed header or footer). 

This behavior exists on both iOS and macOS Safari, but not on Chrome or Firefox.

Note: this is particularly problematic when using iOS with VoiceOver on, as VoiceOver will trigger tapping on the location where its focus is, which means that if you're focused on an element that's underneath a fixed container, the click event will trigger on the fixed container and not the element that gets read out as having focus. As this issue isn't a problem in Chrome, I was able to successfully avoid this issue on an Android device with TalkBack enabled.

I created a really basic codepen (https://codepen.io/backwardok/pen/6980c6068b69618a90bd5b12716dde8b) that demonstrates this problem (full page version: https://cdpn.io/backwardok/debug/6980c6068b69618a90bd5b12716dde8b).
Comment 3 Simon Fraser (smfr) 2020-07-30 15:36:48 PDT
Thanks for the testcase!