Sweetalert in IE 10

[mohammad-shadmehr]

I am using Sweetalert version 2.0.8 and it works perfect in Chrome, Edge, IE 11 but IE 10. The problem is that when it pops up and user click any button on it (OK,Confirm, Cancel) it hides the popup but also freezes the entire screen user wont be able to click anywhere on the page!

[jbeliezVega]

Same here !

[alanjohnson]

"Uses ES6, and Does not (and never will) support IE10 or lower" should be at the top of the description. Unfortunately for many, IE10 is not dead yet, and metrics tell us too many customers use it to ignore.

need to direct people to version 1.x for IE10 support. https://github.com/errakeshpd/sweetalert-1

[lionralfs]

Hey guys,

I've realized that IE<11 does not support the pointer-events CSS property. We're using it to prevent the hidden modal (which is still overlaying the entire page) from being clickable. A workaround would be to use the visibility property instead, which has the same effect.

So we either change all occurrences of pointer-events in the codebase to use visibility (so we can still support IE<11), or you could try overriding sweetalert's CSS with this snippet whenever you detect IE<11:

body .swal-overlay {
  visibility: hidden;
}

body .swal-overlay--show-modal {
  visibility: visible;
}

body .swal-button__loader {
  visibility: hidden;
}

body .swal-overlay--show-modal .swal-modal {
  visibility: visible;
}

body .swal-modal {
  visibility: hidden;
}

@t4t5 what are your thoughts? I haven't really tested this much in other browsers other than IE10.

[alanjohnson]

My Vote is always going to be for the option that requires the least effort / thought for users of the tool. And also whatever doesn't require browser detection.

[t4t5]

It's a tricky one. I agree that IE10 is unfortunately still too big to ignore. At the same time, adding browser-specific "hacks" can lead down a dark path...

@lionralfs what do you think of adding your code inside a media query that targets IE browsers specifically? http://jsfiddle.net/WZe7d/2/

[lionralfs]

Sounds good. We should probably include a media query specifically targeting IE < 11. According to this page, the following query should target IE8-IE10:

@media screen\0 {

}

I'll send a PR.