sl-switch and sl-checkbox allow scrolling out of bounds

[freeformflow]

Describe the bug

I'm encountering strange scrolling behavior caused by the sl-switch and sl-checkbox components under specific conditions. When they appear in the initial scroll view, the behavior is expected. However, when they appear beyond the initial scroll view, the entire viewport allows scrolling beyond the root html container.

In Chrome, when you toggle one of these elements, the scroll pops out of bounds, too. Even if I use CSS to constrain scrolling, the bug programmatically puts the scroll position beyond what you can reach with a scrollwheel. There are no errors listed in the console.

Demo

I've prepared a CodePen with a simplified representation. https://codepen.io/freeformflow/pen/rNroBMr?editors=1101

Updated repro with instructions: https://codepen.io/claviska/pen/JjBzyeJ

I constrained the html container to make it more clear. The blue section on the left in blue represents a nav that doesn't scroll. The section on the right has several panels with enough height that it must scroll. The way it's setup now, it will behave properly. If you uncomment the markup starting on line 29, you will see the bug behavior. When I run the demo in Chrome, toggling the lower switches pops the scroll outside the html container. That doesn't happen in Safari for me. I was also able to reproduce this behavior with sl-checkbox.

Browser / OS

• OS: Mac
• Browser: Chrome
  • Version 109.0.5414.87 (Official Build) (x86_64)
• Browser: Safari
  • Version 14.1.1 (15611.2.7.1.6, 15611)

[claviska]

I was able to repro it in Chrome, Firefox, and Safari. It seems to happen when the <sl-switch> receives focus. I'll have to track this down next week. The same behavior also occurs with <sl-checkbox>.

If anyone wants to take a stab at this over the weekend, consider it fair game.

Here's an updated repro: https://codepen.io/claviska/pen/JjBzyeJ

[claviska]

This was tricky to track down, but the root cause was the hidden <input> that's used by Switch and Checkbox under the hood. To hide it, the following CSS is used:

.switch__input {
  position: absolute;
  opacity: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

Unfortunately, there was supposed to be a container with position: relative around it to ensure it remains in the correct place for constraint validation positioning and scrolling.

Changing opacity to 1 in the dev console provides a better understanding as to why this happens. Notice the position of the checkboxes below. This is where the browser was scrolling to on focus, causing the bug.

Thanks for reporting this, and especially for the excellent repro! The fix landed in 7549e50 and will be available in the next release.

[freeformflow]

Thank you for looking at that so quickly and making the fix. ✨🚀