Checkbox click scrolls HTML element when body is not scrollable

[sleddev]

Describe the bug When the HTML and body elements are not scrollable (instead some container div is scrollable), clicking on a checkbox that's not visible without scrolling down causes the HTML to be scrolled (.scrollTop applied), making the page pretty much unusable.

To Reproduce Steps to reproduce the behavior:

1. Go to the StackBlitz repro
2. Scroll down
3. Click on a checkbox that wasn't visible without scrolling
4. See the whole page shifting up

Expected behavior The container div gets scrolled to make the checkbox visible.

Screenshots

Desktop (please complete the following information):

• OS: Linux (Fedora 40)
• Browser: Brave, Chrome, could not reproduce on Firefox
• Version: Brave 1.67.123, Chrome 127.0.6533.72

Smartphone (please complete the following information):

• Device: Xiaomi 12
• OS: Android 14
• Browser: Brave
• Version: 1.67.136

Additional context I could only reproduce this in chromium-based browsers, not Firefox. Tho in Firefox no scrolling happens, so that's not expected behavior either.

[army-u8]

I have encountered this problem before. Because the checkbox input element style has position: "absolute" , this causes the element to be out of the normal document flow.You can try to give the relative attribute to the parent element or Checkbox.Root.

[sleddev]

Thank you so much! Adding position: relative !important fixed my issue, both in Chromium and Firefox