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`.
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
-
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!!!