Huge White Space at End of Scroll

[k16e]

Describe the bug
There's gulf almost half of screen white space on the /switch page.

To Reproduce
Click on or navigate the Switch component page and scroll down.

[IHIutch]

Looks like this is due to the position: absolute on the switch inputs, I think Ive seen this on another page too. Probably worth putting top:0; left: 0; on these. Not sure why it sinks to the bottom 🤔

[spenco100]

I've seen these on any page in the documentation that includes a switch. When I tap or click on it, I have this massive whitespace coming from the bottom up. I have to scroll all the way to the top of the page, then back down in order for the page to behave correctly.

This was also affecting modals for me, when I had scroll-behavior="inside" set. I followed @IHIutch's recommendation and wrote this just in the script tag of my component, which seems to work well for my purposes:

input[type=checkbox] {
  top: 0!important;
  left: 0!important;
}

[IHIutch]

So I looked into this a bit more and it seems like the source of the issue is the overflow that's set on #main-content. Removing that overflow makes the absolutely placed input behave as expected.

That being said, it's probably a safer bet to simply put a position: relative on the switch's wrapper. This would cause the Vue switch to be different from the React switch, but it also solves the problem; in a way that should make it less reactive to parent styles and help prevent any edge cases like this.