Carbon: Modalwrapper styles break when toggling a checkbox at the bottom of a large content

[albertmir]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

When we have a <ModalWrapper> with a lot of content inside and a checkbox at the bottom of scroll position, styles break if we toggle the checkbox state.

Is this issue related to a specific component?

• ModalWrapper
• Checkbox

What did you expect to happen? What happened instead? What would you like to
see changed?

• Modal header, body and footer should remain at the same expected place.

What browser are you working in?

Google Chrome for Mac: v87.0.4280.67

What version of the Carbon Design System are you using?

• carbon-components": "10.24.0"
• carbon-components-react": "7.24.0"

Steps to reproduce the issue

1. Create a <ModalWrapper>
2. Add enough content inside to scroll, for example, some paragraphs.
3. Right after the content, place a <Checkbox>
4. In your site, launch the modal and scroll down to the bottom
5. Click on the checbkox to toggle the state
6. Modal styles will break

CodeSandbox demo

• https://codesandbox.io/s/cold-leftpad-oo0f5

Additional information

• Screenshots:
  

[tw15egan]

Very weird, wonder if Chrome changed something in the latest release?

Here is v86 where I was unable to reproduce

But after updating to v87, I am seeing the same issue.

[albertmir]

Indeed @tw15egan. I did many tests (even with Chrome Canary and Microsoft Edge) and the issue appears in versions >= 87.

[edurocher]

Yes we had many related problems with Chrome 87 too! It seems indeed that something changed in Chrome with absolute positioned elements... Adding this rule solved it for us:

.bx--checkbox, .bx--radio-button, .bx--visually-hidden {
  left: -999px;
}

I tried this using the Chrome dev tools on your example, it seems to fix your problem too.