[Modal] Fullscreen modals are not working in IE11

[ColinFrick]

Original issue: Semantic-Org/Semantic-UI#6597

Steps

Fullscreen modal in IE11 are rendered half off-screen.

Expected Result

Modal rendered full in the center of the screen.

Actual Result

Modal rendered half off screen

Version

2.4.0

Testcase

https://semantic-ui.com/modules/modal.html#full-screen

[lubber-de]

This fix works as long as the content of the modal does not exceed the screen height. If that's the case, the top of the modal is stuck at 50%
See (in IE11): https://jsbin.com/tenobipedu/1/edit?html,css,js,output
You need to shrink the browser Window to see the effect:

Content does not fit:

Content fits:

[ColinFrick]

@lubber-de Thanks for the feedback. I will check it out

[ColinFrick]

@lubber-de I added another commit to fix the IE11 scrolling modal issue: c4eed66

[lubber-de]

Top position is fixed with your commit, but the left value is still ignored when content is larger than screen (see first screenshot above where the height was still wrong -> its also attached to the left border.
When the content fits the screen height then the left-property is respected as expected

It seems to be fixed by adding margin-left:0 and again left: 2.5% (additional fix for #135 also then)

.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal,
.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal,
.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal,
.ui.top.aligned.dimmer > .ui.legacy.legacy.modal {
  top: auto !important;
  margin-left:0 !important;
  left: 2.5% !important;
  }

[ColinFrick]

This would interfere with the whole legacy modal thing introduced in SUI 2.4.0.
The real problem is that the vertical scrollbar width is not taken into account when calculating the modal width.

[ColinFrick]

I did some further digging and this bug affects all .scrolling legacy modals, for which the width is defined in percent:

• fullscreen modals
• mobile (screen width < 768px)
• tablet (screen width < 992px)

While retrieving the modals width the scrollbar is not rendered, therefore it returns a larger width than it should - in this cases the modal is half the scrollbars width further to the left.

I'm inclined to close this issue and move the discussed issue in another one. The original issue (and your addition with the top issue) should be fixed.

[lubber-de]

Agreed, thanks for investigation!