One of the lowest low hanging fruits I see browsing the web today is layout shift when an obtrusive scrollbar toggles on/off.
-
One of the lowest low hanging fruits I see browsing the web today is layout shift when an obtrusive scrollbar toggles on/off.
It happens when navigating between pages of varying length. It happens with poorly implemented menus/modals/dialogs that toggle `overflow: hidden`. It can happen when a particularly heavy/long page progressively renders.
`html { overflow-y: scroll; }` can fix it for some of these cases.
But primarily: test for obtrusive scrollbars, please!
-
Fynn Beckerreplied to Zach Leatherman :11ty: on last edited by
@zachleat Not yet available in Safari unfortunately, but a good progressive enhancement property: `scrollbar-gutter: stable`.
scrollbar-gutter - CSS: Cascading Style Sheets | MDN
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
MDN Web Docs (developer.mozilla.org)
-
Patrick Brossetreplied to Fynn Becker on last edited by
@mvsde @zachleat I agree this is one of the important missing pieces for layout on the web.
WebKit is interested in it https://github.com/w3c/csswg-drafts/issues/4674
Implementation tracked here https://bugs.webkit.org/show_bug.cgi?id=167335 -
@patrickbrosset @mvsde @zachleat (sorry for replying to an old thread) this should now be supported in Safari TP 203!
-
@Lukew @patrickbrosset @mvsde yay!!!