WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
316902
REGRESSION (
307212@main
Safari 26.x): flex column padding excluded from scrollHeight
https://bugs.webkit.org/show_bug.cgi?id=316902
Summary
REGRESSION (307212@main Safari 26.x): flex column padding excluded from scrol...
doyeon kim
Reported
2026-06-11 03:42:10 PDT
Summary ======= REGRESSION: Safari 26 flex padding missing from scrollHeight Description =========== Overview -------- A `display: flex; flex-direction: column; overflow: auto` container with `padding-top` / `padding-bottom` reports `scrollHeight === clientHeight` in Safari 26.x, even when padding should extend the scrollable area beyond the viewport. The container is non-scrollable to wheel and touch input. The same content scrolls correctly in Safari 18.x and earlier, and in Chrome/Blink. Steps to Reproduce ------------------ 1. Load the attached `flex-column-padding-scrollheight.html` in Safari 26.x. 2. Open Web Inspector → Console. 3. Inspect the `#scroller` element and read `el.scrollHeight` and `el.clientHeight`. 4. Attempt to scroll the container with the trackpad or touch. Minimal markup: <div id="scroller" style="display:flex; flex-direction:column; overflow-y:auto; height:206px; padding:100px 0;"> <button style="height:38px">A</button> <button style="height:38px">B</button> </div> Actual Results -------------- scrollHeight: 206, equal to clientHeight. Container is non-scrollable. padding-top and padding-bottom are not included in scrollable overflow. Expected Results ---------------- scrollHeight: 276 (padding-top 100 + children 38+38 + padding-bottom 100). Container is scrollable; user can scroll within the padded region. Build Date & Hardware --------------------- - First observed: Safari 26.5 on macOS Tahoe 26.5, MacBook Pro (Apple silicon) - Also reproduced on physical iPhone 15 Pro / iPhone 16 Pro running iOS 26.x Additional Builds / Platforms ----------------------------- Environment scrollHeight Scrollable ----------------------------------- ------------ ---------- Chrome (Blink) macOS 276 yes Safari macOS Tahoe 26.x 206 no iOS 26.x physical device 206 no iOS 26.5 Simulator (Xcode 26.5) 206 no iOS 18.6 Simulator 276 yes iOS 17.2 Simulator 276 yes Regression range: iOS 18.6 → iOS 26.5 (Safari 18.x → Safari 26.x). Additional Information ---------------------- The new Flexbox algorithm rollout in Safari 26 may be related. Two adjacent fixes have shipped in this series: - Safari 26.2 (158529814): padding end incorrectly contributing to scrollable overflow when inline direction is flipped. - Safari 26.4 (170503510): padding-inline-end not included in scrollable overflow for block containers. The case in this report — block-axis (padding-top / padding-bottom) on a flex column container — appears not to have been addressed by the above fixes. Workaround: replacing block-axis padding with ::before / ::after pseudo-element spacers (height: 100px; flex-shrink: 0) restores correct scrollHeight. Pseudo-element children are accounted for; only the container's own block-axis padding is excluded.
Attachments
Minimal reproducible example for a Safari 26.4+ regression involving scrollHeight calculation in flex column containers with vertical padding.
(5.15 KB, text/html)
2026-06-13 02:54 PDT
,
doyeon kim
no flags
Details
rendering in safari, firefox, chrome
(555.18 KB, image/png)
2026-06-17 01:34 PDT
,
Karl Dubost
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1
2026-06-11 09:42:48 PDT
***
Bug 316901
has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
Comment 2
2026-06-11 09:43:05 PDT
<
rdar://problem/179376053
>
doyeon kim
Comment 3
2026-06-13 02:52:18 PDT
Additional regression testing on iOS Simulator shows that the issue does not reproduce on iOS 26.3.1, but does reproduce on iOS 26.4 and later. This suggests the regression was introduced between iOS 26.3.1 and 26.4.
doyeon kim
Comment 4
2026-06-13 02:54:12 PDT
Created
attachment 480093
[details]
Minimal reproducible example for a Safari 26.4+ regression involving scrollHeight calculation in flex column containers with vertical padding.
Karl Dubost
Comment 5
2026-06-17 01:34:44 PDT
Created
attachment 480119
[details]
rendering in safari, firefox, chrome Safari Technology Preview 26.0 (Release 245) 22625.1.18.20.3 Firefox Nightly 153.0a1 15326.6.11 Google Chrome Canary 151.0.7894.2 7894.2
Karl Dubost
Comment 6
2026-06-17 01:51:38 PDT
Maybe this is the result of
Bug 286753
http://commits.webkit.org/307212@main
inline const LayoutRect RenderBox::scrollableContentAreaOverflowRect() const { if (!m_overflow) return flippedClientBoxRect(); // returns the PADDING box, should be the CONTENT box ? return m_overflow->contentArea(); }
Karl Dubost
Comment 7
2026-06-17 01:52:32 PDT
Maybe use return flippedContentBoxRect() instead.
Karl Dubost
Comment 8
2026-06-17 02:44:59 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/67330
EWS
Comment 9
2026-06-25 04:38:09 PDT
Committed
315813@main
(5a62fb16bf60): <
https://commits.webkit.org/315813@main
> Reviewed commits have been landed. Closing PR #67330 and removing active labels.
Karl Dubost
Comment 10
2026-06-25 04:49:55 PDT
Submitted web-platform-tests pull request:
https://github.com/web-platform-tests/wpt/pull/60894
alan
Comment 11
2026-06-29 16:50:23 PDT
***
Bug 318111
has been marked as a duplicate of this bug. ***
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug