I encountered an odd problem in the app I'm developing. I'm originally using svelte and tailwind css, however I have reproduced the issue in pure html/css.
In order to achieve a non-scrolling header, I followed some examples I have seen online:Set the body's size to 100vw x 100vh, and set overflow to be hidden, then within that add my header, and my main, making sure overflow is set to auto on the main.
This works great, in my content I have some radio buttons, which also works fine until I add the sr-only class from tailwind.
From the moment I add this class, clicking a label that was originally outside the viewport seems to scroll my unscrollable body, causing the layout of the site to be broken,
I have managed to reproduce in jsfiddle: https://jsfiddle.net/ax7t6ngf/ (code may seem long, but it's just the same element duplicated many times to have some contents to scroll)
*,::before,::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e4e4e7; /* 2 */}html { line-height: 1.5; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}nav { color: white; background-color: black; width: 100%; padding: 1rem;}body { overflow: hidden; width: 100vw; height: 100vh; display: flex; flex-direction: column; margin: 0;}main { display: flex; flex: 1; padding: 1rem; overflow: auto; background-color: #f3f4f6; gap: 0.5rem;}.narrow-container { max-width: 32rem; margin: auto;}.font-bold { font-weight: 700;}.italic { font-style: italic;}.button-group { display: inline-flex; --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: black;}.radio-button-group { display: flex; background-color: white; text-align: center; padding: 1rem; border-width: 1px; justify-content: center; align-items: center; flex-direction: column; font-weight: 500; font-size: 0.75rem;}.radio-button-group:hover { background-color: lightgrey;}.radio-button-group:focus-within{ color: red;}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}<!doctype html><html lang="en"><head><meta charset="utf-8" /></head><body><header><nav> Header</nav></header><main><div class="narrow-container"><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">Some Question</p><p class="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum mi nec, ultricies metus. Integer sit amet semper turpis.</p><div class="button-group" role="group"><label class="radio-button-group"><input class="sr-only" type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input class="sr-only" type="radio" value="5"><span>Exceptional!</span></label></div></div><div><p class="font-bold">This one doesn't seem to break everything.</p><p class="italic"> The only difference is the lack of "sr-only" class on the input.</p><div class="button-group" role="group"><label class="radio-button-group"><input type="radio" value="1"><span>Disappointing</span></label><label class="radio-button-group"><input type="radio" value="2"><span>Under Expectations</span></label><label class="radio-button-group"><input type="radio" value="3"><span>As Expected</span></label><label class="radio-button-group"><input type="radio" value="4"><span>Above Expectations</span></label><label class="radio-button-group"><input type="radio" value="5"><span>Exceptional!</span></label></div></div></div></main></body></html>To see the problem:
- Click some of the buttons originally visible without scrolling and notice that nothing crazy happens.
- Scroll towards the bottom of the page, and click the radios on the very las question (these do not have the sr-only class) and notice that nothing crazy happens.
- Click on the buttons just above the last question: The layout breaks and most of the page becomes inaccessible.
It is possibly Chrome-related, when I try in Firefox there seems to be no problem.
I've tried different combinations of layouts, and I wonder if maybe I hit a bug in Chrome? Or if I'm the one doing something inherently wrong, I'm not a CSS expert.
I have found this other question: sr-only class causing page scroll which seems slightly related, and points to a chromium bug https://issues.chromium.org/issues/40734994 which has been closed since.
I have found that taking out the position: absolute from the sr-only class resolves the problem, but that class is from tailwind, and every other implementation I find also uses position: absolute so I'm a little nervous just removing it.