{"id":350486,"date":"2021-08-24T12:13:30","date_gmt":"2021-08-24T19:13:30","guid":{"rendered":"https:\/\/css-tricks.com\/?p=350486"},"modified":"2021-08-24T12:13:32","modified_gmt":"2021-08-24T19:13:32","slug":"scrollbar-reflowing","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scrollbar-reflowing\/","title":{"rendered":"Scrollbar Reflowing"},"content":{"rendered":"\n<p>This is a bit of advice for developers on Macs I&#8217;ve heard quite a few times, and I&#8217;ll echo it: go into <strong>System Preferences &gt; General &gt; Show scroll bars<\/strong> and set to <strong>always<\/strong>. This isn&#8217;t about you, it&#8217;s about the web. See, the problem is that without this setting on, you&#8217;ll never experience scrollbar-triggered layout shifts, but everyone else with this setting on will. Since you want to design around not causing this type of jank, you should use this setting yourself.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here&#8217;s Stefan Judis demonstrating that usage of viewport units can be one of the causes:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Today I learned a little CSS fact I wasn&#39;t aware of. Viewport units are not taking scrollbars into consideration and can trigger overflows easily. <br><br>Found on the <a href=\"https:\/\/twitter.com\/polypane?ref_src=twsrc%5Etfw\" rel=\"noopener\">@polypane<\/a> blog: <a href=\"https:\/\/t.co\/RpTnwzrYcA\">https:\/\/t.co\/RpTnwzrYcA<\/a><br><br>Video alt: Example showing that 100vw can trigger overflows. <a href=\"https:\/\/t.co\/JXakqV3Vna\">pic.twitter.com\/JXakqV3Vna<\/a><\/p>&mdash; Stefan Judis (@stefanjudis) <a href=\"https:\/\/twitter.com\/stefanjudis\/status\/1429513340657807367?ref_src=twsrc%5Etfw\" rel=\"noopener\">August 22, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>There, <code>100vw<\/code> causes horizontal overflow, because the vertical scrollbar was already in play, taking up some of that space. Feels <em>incredibly wrong<\/em> to me somehow, but here we are. <\/p>\n\n\n\n<p>Stefan points to <a href=\"https:\/\/polypane.app\/blog\/strategies-for-dealing-with-horizontal-overflows\/\" rel=\"noopener\">Kilian Valkhof&#8217;s article<\/a> about dealing with this. The classic fixes:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>The easy fix is to use&nbsp;<code>width: 100%<\/code>&nbsp;instead. Percentages don&#8217;t include the width of the scrollbar, so will automatically fit.<\/p><p>If you can&#8217;t do that, or you&#8217;re setting the width on another element, add&nbsp;<code>overflow-x: hidden<\/code>&nbsp;or&nbsp;<code>overflow: hidden<\/code>&nbsp;to the surrounding element to prevent the scrollbar.<\/p><cite><em>Kilian Valkhof<\/em>, <a href=\"https:\/\/polypane.app\/blog\/strategies-for-dealing-with-horizontal-overflows\/\" rel=\"noopener\">&#8220;How to find the cause of horizontal scrollbars&#8221;<\/a><\/cite><\/blockquote>\n\n\n\n<p>Those are hacks, I&#8217;d say, since they are both things that aren&#8217;t exact matches for what you were wanting to do. <\/p>\n\n\n\n<p>Fortunately, there is an incoming spec-based solution. Bramus has the scoop:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>A side-effect when showing scrollbars on the web is that the layout of the content might change depending on the type of scrollbar. The&nbsp;<a href=\"https:\/\/drafts.csswg.org\/css-overflow-4\/#scrollbar-gutter-property\" rel=\"noopener\"><code>scrollbar-gutter<\/code>&nbsp;CSS property<\/a>&nbsp;\u2014which will soon ship with Chromium \u2014 aims to give us developers more control over that.<\/p><cite><em>Bramus Van Damme<\/em>, <a href=\"https:\/\/www.bram.us\/2021\/07\/23\/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property\/\" rel=\"noopener\">&#8220;Prevent unwanted Layout Shifts caused by Scrollbars with the&nbsp;<code>scrollbar-gutter<\/code>&nbsp;CSS property&#8221;<\/a><br><\/cite><\/blockquote>\n\n\n\n<p>Sounds like the trick, and I wouldn&#8217;t be surprised if this becomes a very common line in <a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/\">reset stylesheets<\/a>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  scrollbar-gutter: stable both-edges;\n}<\/code><\/pre>\n\n\n\n<p>That makes me wonder though&#8230; it&#8217;s the <code>&lt;body&gt;<\/code> when dealing with this at the whole-page level, right? Not the <code>&lt;html&gt;<\/code>? That&#8217;s been weird in the past with scrolling-related things. <\/p>\n\n\n\n<p>Are we actually going to get it across all browsers? Who knows. Seems somewhat likely, but even if it gets close, and the behavior is specced, I&#8217;d go for it. Feels progressive-enhancement-friendly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a bit of advice for developers on Macs I&#8217;ve heard quite a few times, and I&#8217;ll echo it: go into System Preferences &gt; General &gt; Show scroll bars and set to always. This isn&#8217;t about you, it&#8217;s about the web. See, the problem is that without this setting on, you&#8217;ll never experience scrollbar-triggered [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":306552,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":358956,"url":"https:\/\/css-tricks.com\/strut-your-stuff-with-a-custom-scrollbar\/","url_meta":{"origin":350486,"position":0},"title":"Strut Your Stuff With a Custom Scrollbar","date":"December 24, 2021","format":false,"excerpt":"The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped. I didn\u2019t know you could do that on a professional site. And it would look\u2026 good?! I appreciated so\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295947,"url":"https:\/\/css-tricks.com\/two-browsers-walked-into-a-scrollbar\/","url_meta":{"origin":350486,"position":1},"title":"Two Browsers Walked Into a Scrollbar","date":"September 18, 2019","format":false,"excerpt":"Surprise: scrollbars are complicated, especially cross-browser and cross-platform. Sometimes they take up space and sometimes they don't. Sometimes that is affected by a setting and sometimes it isn't. Sometimes you can see them and sometimes you can't unless you're actually scrolling. Styling them is handled in all sorts of different\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375019,"url":"https:\/\/css-tricks.com\/classy-and-cool-custom-css-scrollbars-a-showcase\/","url_meta":{"origin":350486,"position":2},"title":"Classy and Cool Custom CSS Scrollbars: A Showcase","date":"November 14, 2022","format":false,"excerpt":"In this article we will be diving into the world of scrollbars. I know, it doesn\u2019t sound too glamorous, but trust me, a well-designed page goes hand-in-hand with a matching scrollbar. The old-fashioned chrome scrollbar just doesn\u2019t fit in as much. We will be looking into the nitty gritty details\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306427,"url":"https:\/\/css-tricks.com\/css-scrollbar-with-progress-meter\/","url_meta":{"origin":350486,"position":3},"title":"CSS Scrollbar With Progress Meter","date":"April 15, 2020","format":false,"excerpt":"Scrollbars are natural progress meters. How far the scrollbar is down or across is how much progress has been made scrolling through that element (often the entire page). But, they are more like progress indicators than meters, if you think of a meter as something that \"fills up\" as you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":190938,"url":"https:\/\/css-tricks.com\/elegant-fix-jumping-scrollbar-issue\/","url_meta":{"origin":350486,"position":4},"title":"More Elegant Fix for Jumping Scrollbar Issue","date":"December 16, 2014","format":false,"excerpt":"If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar. A classic fix was html { overflow-y: scroll; } to force the scrollbar all the\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333018,"url":"https:\/\/css-tricks.com\/scrollbars-on-hover\/","url_meta":{"origin":350486,"position":5},"title":"Scrollbars on Hover","date":"January 20, 2021","format":false,"excerpt":"First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I'm going to cover the idea of only revealing them on hover. Even macOS itself\u00b9\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/scrollbar-hover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350486"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350486"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350486\/revisions"}],"predecessor-version":[{"id":350571,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350486\/revisions\/350571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/306552"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=350486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}