IE11 long modal scrolling

[sergez]

dimmed isn't assigned/added to body when opening long modal in IE11

Steps

• Open long modal in IE11

Expected Result

The modal should be scrollable

Actual Result

The modal isn't scrollable

Version

0.68.5

Testcase

Open in IE11 https://codepen.io/anon/pen/gRrPRo

[marcdibold]

duplicate? #1157

[layershifter]

Yep, it's dupe of #1157.

[sergez]

I'm not sure. Because it's reproduced with one modal and only on IE11

[sergez]

c'mon guys. It not duplicate. However #1157 reproduced in every browser and this bug reproduced only in IE11. Have you tried to open ONLY ONE long modal in Chrome and in IE11 ?

[sergez]

I used link to codepen from #1157 to keep it alive. It might confuse you...

[layershifter]

Ok

[layershifter]

@sergez You're right, thanks for clarification. I've checked in IE and there is really something wrong.

Chrome

IE

[levithomason]

We can leave this open for investigation, but highly likely that this is a CSS issue which should be fixed over at https://github.com/Semantic-Org/Semantic-UI.

[zlove]

The problem is probably that IE11 does not support multiple parameters in classList.add(), so the 'dimmed' class is not being added to the body element.

See handlePortalMount() in Modal.js

handlePortalMount = (e) => {
    debug('handlePortalMount()')
    const { dimmer } = this.props
    const mountNode = this.getMountNode()

    if (dimmer) {
      debug('adding dimmer')
      
      // FIXME - needs workaround to work in IE 11?
      mountNode.classList.add('dimmable', 'dimmed')

      if (dimmer === 'blurring') {
        debug('adding blurred dimmer')
        mountNode.classList.add('blurring')
      }
    }

    this.setPosition()

    const { onMount } = this.props
    if (onMount) onMount(e, this.props)
  }

[zlove]

Using a classList polyfill (https://github.com/yola/classlist-polyfill) resolved this issue for me.

[layershifter]

@zlove thanks for the investigation 👍 PR is coming

[zlove]

Happy to help @layershifter. Thanks for the quick fix!