Modal's with overlay backgrounds in IE11 don't always cover the fullscreen

[UltraTempest]

🐛 Bug Report

Modal's should appear in front of the content already on screen in all instances. This currently isn't happening in IE11 within the learning codebase:

Versus how it displays in all other browsers:

To Reproduce

Steps to reproduce the behavior: You'll need access to the new Workday Learning Experience on an SUV:

Login as lsimpson Navigate to Future of Learning Blended Course Enroll Navigate to the Webinar, Lesson 6 Select 'View All Lesson Details'

Expected Behavior

Modal appears with Login Details and Additional Information

Actual Results

Modal appears behind the Lesson Overview component and cannot be viewed

Browser (if applicable)

IE11

Link to repl or repo (highly encouraged)

https://ghe.megaleo.com/UIC/learning

[willklein]

Added context, we have reports of a similar problem which may point out the root cause, if it's indeed the same issue:

We found a strange bug in IE11, where if an element has an overflow:auto set and then you open a modal, if that modal has a child with a position fixed, the overflow element zIndex will somehow be set to the same zIndex. If we remove the div that usePopupStack creates (has a position: relative and zIndex: 30), it works fine. In order to fix this issue we removed the position:fixed from the overlay and added the overlay layout properties ( height = '100%', width = '100%', top = '0', position = 'fixed') to the usePopupStack element.

[NicholasBoll]

We've dropped support for IE11 and won't be fixing this. There is a workaround internal teams use and we'll leave the existing code so the current workaround continues to work.