IE11 :: Any Modal component :: content overflows

Detailed description

Describe in detail the issue you’re having.

Only in IE11 if you have enough components (or text) rendered inside modal body so that scroll bar should appear, then somehow it doesn’t appear and content overflows.

Is this issue related to a specific component?

Modal, ModalWrapper, ComposedModal

What browser are you working in?

IE11

What version of the Carbon Design System are you using?

v9

Steps to reproduce the issue

1. Go to http://react.carbondesignsystem.com/
2. Go to 1st ModalWrapper example transactional/passive modal
3. Launch modal

Additional information

p.s. I didn’t check is it carbon-components-react or carbon-components issue

[st004547]

Can be reproduced on https://react.carbondesignsystem.com/?path=/story/modal--default and turning on scrolling content via knobs.

I believe it’s the display: grid; in the css that is not fully supported by IE.

UPDATE: Based on https://create-react-app.dev/docs/post-processing-css/ adding /* autoprefixer grid: autoplace */ to the beginning of your css will allow autoprefixer to do it’s thing for the grid.

For Sass, /*! autoprefixer grid: autoplace */ seems to work.

And for completeness, there’s an env var option in here: https://stackoverflow.com/questions/54505882/autoprefixer-doesnt-work-in-create-react-app-while-using-sass

[elizabethsjudd]

We did extensive testing with this and unfortunately could not find a consistent way to achieve the desired behavior with CSS only but we have a fix that only gets triggered in IE11 in our JS that will set the height explicitly if needed: function that applies the height for IE11 and Remove the height on close