Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11 support broke since style option #77

Closed
emkajeej opened this issue Jun 2, 2021 · 3 comments · Fixed by #79
Closed

IE11 support broke since style option #77

emkajeej opened this issue Jun 2, 2021 · 3 comments · Fixed by #79

Comments

@emkajeej
Copy link

emkajeej commented Jun 2, 2021

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
Copy link
Contributor

AStoker commented Jul 14, 2021

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

AStoker added a commit to AStoker/toastify-js that referenced this issue Jul 14, 2021
@emkajeej
Copy link
Author

emkajeej commented Jul 14, 2021

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.

@apvarun
Copy link
Owner

apvarun commented Jul 15, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants