/* One scroller per page. * * Every page sheet extracted from the legacy site carries this pair: * * html { overflow-x: hidden; } * body { ...; overflow-x: hidden; ... } * * and it is the pair, not either line, that is the bug. * * Two rules meet here. CSS Overflow 3 §3.3: when one axis is not `visible`, * the other's `visible` computes to `auto` — so `overflow-x: hidden` means * `overflow-y: auto` as well, and the element becomes a scroll container. * §3.5: the viewport's own overflow is propagated from the root element, and * only if the root is `visible` is it taken from instead. So: * * html visible + body hidden body's value goes to the viewport, * body itself is visible. One scroller. * (This is /aslmock, measured: 0px.) * html hidden + body hidden html's value goes to the viewport, and * body's applies to body. Two scrollers. * * The second is what these pages ship. Measured on /listening, signed in, * 122 cards, before this file existed: * * scroll chain under the cursor BODY -> HTML * body's own scrollbar 15px wide, beside the window's * body can travel 68px * html can travel 21,516px * * Two scrollbars on the right edge, which is what it looks like, and a wheel * gesture split between them, which is what it feels like: one tick down from * the top moved body 0 -> 68 and only then html 0 -> 125, so the page does not * begin to move until the inner scroller is used up, and on the way back up * the last 68px of the gesture go into the inner one instead of the page. With * this file loaded the same tick moves html 0 -> 225 and body not at all. * * What body was scrolling is decoration: .shell::after is * position: absolute; bottom: -66px, so it hangs below the shell and into * body's scrollport. The homepage traps 2px and /reading 8px — the size does * not matter, its existence does. * * `html { overflow-x: hidden }` is restated rather than assumed, because * login.css, mock.css and aslmock.css put the rule only on : without it * here, `body { overflow-x: visible }` would leave those pages with nothing * clipping sideways. On the root it clips the same things and creates no inner * scroller — /listening still hides 84px of horizontal decoration * (.shell::before is right: -84px) with no horizontal scrollbar. * * Deliberately a separate file, like listing-perf.css: reading.css, * listening.css, writing.css and the rest are output from * scripts/extract_page_assets.py, and anything written into them is lost the * next time it runs. * * Specificity is left alone on purpose. mock.css's `body.mock-frame-open` and * login.css's `body.login-blocked-lock` set `overflow: hidden` to lock the * page behind an overlay; a class beats the bare element selector below, so * those still win. * * Not loaded by content/books.html and content/speaking.html, which carry the * same pair inline and are served from CONTENT_ROOT rather than rendered. * They are fixed in place. */ html { overflow-x: hidden; } body { overflow-x: visible; } /* And then the one scrollbar is not drawn. * * Asked for: the 15px grey trough with its two arrow buttons is Windows * furniture on a page that has none, and it sat against the cards. The * element stays a scroll container — this hides the indicator, it does not * take the scrolling away. Measured after the change: the wheel still moves * the page, and 38,140px of travel is still there to move through. * Keyboard scrolling is not measured here — PageDown does not scroll under * the automation harness with or without these rules, so there was no control * case to compare against. Nothing in `scrollbar-width` or the pseudo-element * touches key handling, but that is a reading of the spec, not a measurement. * * The trade is the indicator itself: on a 122-card listing nothing now shows * how far down the page you are, and there is no thumb to drag. * * Nothing changes on macOS or iOS, where scrollbars are already overlaid and * invisible until you scroll. This is for Windows and Linux. * * It also makes the width consistent rather than less so. A reserved * scrollbar made every scrolling page 15px narrower than one that fit, so the * layout shifted sideways between /account and /listening. With no scrollbar * reserved anywhere, every page is the full width. * * Three declarations because three engines have three answers, and the * property is on the scroll container — which is , since the root's * overflow is what propagates to the viewport (the rule above). `body` is * named too: the pseudo-element is matched against whichever element the * viewport's scrollbar is taken from, and that is not the same choice in * every version. */ html, body { scrollbar-width: none; /* Firefox 64+ */ -ms-overflow-style: none; /* Edge 12-18, IE 10+ */ } html::-webkit-scrollbar, body::-webkit-scrollbar { /* Chrome, Edge, Safari, and every Chromium-based browser on Windows. */ width: 0; height: 0; display: none; }