apvarun/toastify-js

IE11 support broke since style option

emkajeej opened this issue · 3 comments

emkajeej commented

Using this library in IE11 no longer work out of the box.

line 127 etc:

      for (const property in this.options.style) {
        divElement.style[property] = this.options.style[property];
      }

Replacing const with var fixes this.

Also note that ShadowRoot (line 266) is not supported in IE11. Therefore the selector parameter needs to be passed when calling a Toastify:

Toastify({
  text: "This is a toast",
  duration: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  newWindow: true,
  close: true,
  gravity: "top", // `top` or `bottom`
  position: "left", // `left`, `center` or `right`
  style: { "background-image" : "linear-gradient(to right, #00b09b, #96c93d)",
  stopOnFocus: true, // Prevents dismissing of toast on hover
  onClick: function(){} // Callback after click,
  selector: document.body // <= IE11 needs this.
}).showToast();
AStoker commented

Changing the var makes sense. But for the shadow root, what happens when you don't pass in a selector at all? That should fallback to the default document.body

emkajeej commented

It already falls back to document.body I think if you don't pass a selector. It's just IE that fails to do so, so if IE is not of your concern than you can leave it blank and it will fall back to ShadowRoot.

Actually looking at L266 and beyond, I'm not sure why IE doesn't just skip to the else, ie document.body.
Edited because I read your post correctly this time :)
IE fails because it's only checked if the passed value is a ShadowRoot instance, but not wether or not the browser supports ShadowRoot at all. So IE will flake out of the instanceof check as ShadowRoot is unknown to it.
Explicitly passing document.body or an HTMLElement fixes it for all in any case.