Popper-core: IE 11 support for 2.0.0 previews

[joshkel]

CodePen demo

https://codepen.io/anon/pen/XLJXZd

Steps to reproduce the problem

1. Install version 2.0.0-next.4 off of NPM.
2. Load in IE 11.
3. Notice the syntax errors in the JavaScript console.

What is the expected behavior?

Loads without errors - or version 2 documents IE 11 as unsupported.

What went wrong?

The 2.0.0-next.4 version available on NPM is built using => fat arrow functions, which aren't supported in IE 11. As a result, it doesn't work in IE 11.

Any other comments?

I realize that 2.0.0 isn't released yet, and I also realize that this behavior may be by design (if Popper.js 2 isn't intended to support IE 11.) So feel free to close this issue. But I ran into this when I mistakenly installed a preview version of Popper.js 2, and I wanted to document it in case anyone else ran into it.

Thanks!

[FezVrasta]

Thanks for the report. I doubt I'll add support for IE on V2. I want to keep the library as lean as possible and IE and its quirks are not going to help with this 😔

But for sure I should at least transpile the code to work on a reasonable amount of browsers.

[atomiks]

IE11 support is still kind of important for most projects (and will be for another 2+ years)

IE10 is dead and buried tho... and I know there are a few hacks in the codebase to fix that specific browser. IE11 is... less terrible at least

[FezVrasta]

I'll see what I can do 👍

[FezVrasta]

Right now, in order to run Popper 2 on Internet Explorer 11, the following polyfills are required:

• Object.assign;
• Object.entries;
• Array.prototype.includes;
• Array.prototype.find;
• Array.from;
• Promise;

You can import all the above polyfills with the following script:

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.includes,Array.from,Object.entries,Promise,Object.assign"></script>

Thought, this isn't enough to make Popper 2 work, for some reason, the popper position is always set to top: 0; left: 0;.

More investigation is required.

[pat-son]

That script tag didn't work for me, but this one did:

<script src="https://polyfill.io/v3/polyfill.js?features=Array.prototype.find,Array.prototype.includes,Array.from,Object.entries,Promise,Object.assign"></script>

I had to add the Array.from polyfill as well. Seems like changing getBoundingClientRect.js as discussed #617 fixes both IE and Edge. The basic case works now, I just need to test the rest.

[pat-son]

I didn't test every single visual test file (changing the syntax over from modules was a little tedious), but from the ones I did try, it seems that after #899 was merged, Popper 2 works with IE11 perfectly fine with the polyfills. There might be some weird edge cases, but I think it's safe to say that at the very least, support is there for the main features.

[FezVrasta]

Cool! I'll close this issue for now, if any problem is found please open a dedicated issue.

[chitgoks]

There is an issue when the onMethods are included in the tippy instance. e.g.

onShow(instance) {
                            instance.popperInstance.reference = {
                                clientWidth: 0,
                                clientHeight: 0,
                                getBoundingClientRect() {
                                    return {
                                        width: 0,
                                        height: 0,
                                        top: y,
                                        right: x,
                                        bottom: y,
                                        left: x,
                                    };
                                }
                            };
                        }

keeps saying : Expected ':'