Bug 316902

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.