IE11 & Edge - Any Modal gets cropped off when resizing

[Mikadv]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Once a user uses Edge or Internet Explorer resizes a window under the size the modal has and then expanding the area again results in the modal being cropped off at the minimum position, leaving a half modal back.

Is this issue related to a specific component?

Modal

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

The modal should be shrink- and expandable to the original size without any difference. Or in other words, resizing should not destroy the UI.

What browser are you working in?

Chrome, Firefox, Edge, IE11

Bug in: Edge and IE11
Not in: Firefox and Chrome

What version of the Carbon Design System are you using?

v9 but also occurs in V10

Steps to reproduce the issue

1. Open Edge

---

2. Visit: http://react.carbondesignsystem.com/?path=/story/modal--default
3. Drag the story part over the modal, such that it cuts it off.
4. Minimize the window.
5. The modal is already cropped off
6. Expand it to maximum again and drag the story area down. What remains is a dialog that is cut in half.

2.2 Visit: https://www.carbondesignsystem.com/components/modal/code
3.2 Click on Show modal
4.2 Minimize the screen vertically such that it crops of the modal
5.2 Maximize and Minimize and then expand the window a bit vertically
6.2 The dialog is cropped off

Screenshots

6.2)

[aledavila]

Hi there thanks for reporting this. Sorry we are just getting to this. Would you mind reproducing this in a code sandbox
https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

It makes it easier on our team to debug and work on things. Sometimes we can see weird bugs with storybook.

[aledavila]

Edit for team:

No longer a bug on Edge latest. Only found in IE11

[Mikadv]

Somehow it is behaving still buggy in Edge but not that hard any longer:

1. Visit https://codesandbox.io/s/trusting-frog-jxb39
2. Shrink the window horizontally and vertically such that it is small but the modal doesn't cover all remaining space.
3. Now expand the window only vertically
4. Result: The modal wont resize any longer, only when the window is expanded horizontally again.

[asudoh]

Hi 👋 thank you for reporting @Mikadv and doing investigations @aledavila! I think #4657 alleviates the the problem described here. Stay tuned for the next release - If you are interested, you can clone this repo and run yarn install && yarn build && chdir packages/react && yarn storybook there.