Bug 290096 – Tabbing in a scroll container with scroll-padding set does not scroll focused element into view

• Component: Scrolling
• Status: RESOLVED FIXED

Created attachment 474641 [details]
Screenshot of an element focused in scroll-padding area in Safari 18

When a scrollable element has focusable elements in it, and has scroll-padding set in the direction of the scrolling, the expectation is that the focused element should not be in the scroll-padding area.


To reproduce the issue:
1. Go to https://codepen.io/risker/pen/jEOzoYK
2. Tab between the buttons until you reach a button in the area covered wholly by the red overlay
3. See that a button that is covered by the overlay (same size as the set scroll-padding) is focused and is not scrolled into view automatically (screenshot attached).

In other browsers (Firefox, Chrome, Edge), when an element is focused in the scroll-padding area, scroll position is shifted so the element becomes wholly visible.

Similar old bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1642922

See also: https://github.com/w3c/csswg-drafts/issues/5066

[Radar WebKit Bug Importer]

<rdar://problem/147513379>

[Simon Fraser (smfr)]

getLocalExposeRect() takes scroll padding into account by inflating the size of the element being scrolled into view, but then ScrollableArea::getRectToExposeForScrollIntoView() thinks that enough is visible to not need to scroll.

We really need to use scrollPadding to shrink the size of the scrolling viewport instead.

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/46189

[EWS]

Committed 311512@main (079d6409fe00): <https://commits.webkit.org/311512@main>

Reviewed commits have been landed. Closing PR #46189 and removing active labels.

[Simon Fraser (smfr)]

Exported to WPT:

commit 62b76d402c566ea45e0ff551df161aa3d2294958 (HEAD -> master)
Author: Simon Fraser <[e-mail]>
Date:   Thu Apr 23 13:51:57 2026 -0700

    WebKit export of https://bugs.webkit.org/show_bug.cgi?id=290096

[Simon Fraser (smfr)]

^ ignore