Unwanted scrolling with checkbox toggle buttons

[webJose]

This is a very strange thing that happens to me on a Sveltekit project I'm working on. The issue has 2 symptoms in my case:

1. A second scrollbar appears.
2. Clicking the checkbox toggle button scrolls this second scrollbar.

Reproduction? Sorry, I have none, but I can show you screenshots:

The application layout is that of a PWA, where there's a top navbar (circle 1 in the screenshot), a footer (not in the screenshot), and "the rest" area which is the scrollable area. This means that the application always show the navbar and the footer.

As seen, there are 2 scrollbars: Circle 2 is the intended scrollbar, which starts right after the navbar (and ends before the footer), but the second one is for the entire HTML document (in devtools, the HTML element is signaled as scrollable). This happens by simply adding one of the button variants to the markup.

The Root Cause

The .btn-check class sets the input's position attribute to absolute, and this causes the input box to be positioned "outside". Outside what? Don't know. I think it is positioned at the end of the contents between the navbar and the footer. In other words, I think would not be experimenting this problem if the content between navbar and footer was small in height.

Anyway, because the browser places the invisible input element in this position, this double scrollbar situation arises. The fix: Give it a parent with class .position-relative.

Because my guess is that this only happens to me (unlucky me) I suppose it doesn't warrant a fix, but I wanted to document it for anyone seeing this.