Popper-core: Official browser support?

[reintroducing]

Hello,
I just ran the Popper site in IE9 on Win7 (through VirtualBox) and saw that it was not quite working as expected. What is the official browser support for Popper?

Example: https://www.dropbox.com/s/eq3acgq7prtty51/Screenshot%202016-05-04%2005.53.57.png?dl=0

[FezVrasta]

I've not yet tested it, another guy tested and said that it was working fine on IE10+ and had some problems with small windows in IE9. But it's not a test I did myself.

On Chrome/Firefox it works well on all the recent versions I've tested.

[reintroducing]

Thanks for the quick reply. It does seem that it doesn't work in IE9 as all the examples on the page are pretty much broken. I'm going to close this as you already answered the question. Thanks!

[FezVrasta]

Reopening, I want to give an "official" answer to this question and put it in the readme. :)

[reintroducing]

Understood and thank you.

[FezVrasta]

Is someone aware of a simple way to test the browser support automatically?

I'm aware of BrowserStack but I never used it.
Right now our test suite runs the tests automatically on Chrome, I'd probably like to keep the tests in this way, and add an additional browser support task to check compatibility on all the other browsers.

Any advice is welcome, if someone has time to prepare a Pull Request with the needed code to run the tests on BrowserStack or any other service please feel free to submit it.

[FezVrasta]

I have setup a branch with BrowserStack karma testing.

https://github.com/FezVrasta/popper.js/tree/browserstack
https://travis-ci.org/FezVrasta/popper.js/builds/137438750

I'm waiting for @browserstack to reply to my request for a free account.
Also, I still need to understand how to avoid the tests to just fail entirely and get a nice banner telling which browsers are supported...

[FezVrasta]

Ok switched to @saucelabs and it's much better! I've integrated the multi browser test on the v1-dev branch and it currently passes on Edge and Chrome, there are 5 failing tests on Firefox that I'm investigating.

Gonna add Safari soon.

[FezVrasta]

All the tests are passing on Chrome, Firefox, Edge and Safari.

I need to find a way to run tests on more versions but don't make the build fail if they fail.
I would like the build to fail only if the tests don't pass on the latest version I guess.

Update:

Tests are now passing even on IE11 and IE10 on the v1-dev branch, IE9 has no luck even adding all the missing polyfills..

[FezVrasta]

Ok now we have an official list of supported browsers, it would be really nice to know the support for even the older versions of Chrome/Firefox/Safari/Edge but the main requirement seems to be fulfilled and I'm closing this issue.

[mattsbennett]

Commenting here given the history of discussion re: IE9. If anyone else is in the unfortunate position of needing to support IE9 🙂 , I found it simple to get popper.js working there as well. Just need to:

• Polyfill requestAnimationFrame. I used https://github.com/chrisdickinson/raf. I have a few other polyfills in my project for other features, but haven't specifically confirmed whether they're necessary for popper.js as well, but they are: Array.from, Map and Symbol.
• Use the 2D translate function instead of the 3D one
• Include the "ms" vendor prefix for the 2D transform

e.g. setting from JS:

    getPopperStyle(data) {
        if (!data) {
            return {};
        }

        const left = Math.round(data.offsets.popper.left);
        const top = Math.round(data.offsets.popper.top);
        const transform = `translate(${left}px, ${top}px)`;

        return {
            position: data.offsets.popper.position,
            left: 0,
            top: 0,
            msTransform: transform,
            WebkitTransform: transform,
            transform,
        };
    }

[FezVrasta]

Point 2 and 3 can be replaced with gpuAcceleration: false in the options I guess.

But I clearly remember that even when we shipped the requestAnimationFrame with Popper.js, the tests didn't pass.

If this isn't the case anymore it would be cool to add support for it again, maybe providing the polyfill in the tests suite and replacing 3d with 2d as you said using some browser detection?

[mattsbennett]

Ah, cool - didn't realize there was a gpuAcceleration option! Although I think I'd rather use 2D transforms everywhere rather than top/left positioning everywhere.

Interesting that the tests didn't pass though... I've just confirmed that it's working as expected on IE9 and 1.0.6 using the above method. Ah, just tested with the gpuAcceleration: false option, and positioning isn't working as expected particularly for bottom and top positioning options (this is on IE9 & macOS Chrome latest - haven't tested anywhere else):

With gpuAcceleration: false:

With 2D transform method above:

gpuAcceleration: false seems to work fine for left and right positioning in my testing.

Would be cool to add official IE9 support if possible.

Can't say thanks enough for sharing popper.js!

[FezVrasta]

I'm not sure if there aren't particular differences between top/left approach and transform2d... They both use the existing rendering layer. Why do you prefer 2d?

About the tests, as you can see the library has an extensive suite of tests that cover a lot of edge cases, maybe it works on the common cases but fails on particular ones.

I don't get why it fails with gpuAcceleration: false but work with transform2d...

If you can investigate on why top/left don't work as expected, it would be great. We could detect when transform3d isn't available and automatically fallback to gpuAcceleration: false in this case.

[mattsbennett]

Here was my thinking on top/left vs translate() (2d): I was initially thinking in terms of animation, where it performs better. I realize in this case, we're obviously not using transition when positioning poppers, so the crux of that argument doesn't seem applicable.

Got me wondering though if there's a difference in JS performance using one or the other for static positioning. This seems to suggest that translate() performs much better, but this seems to claim the opposite. So without looking into it deeper, I'm really not sure what to think. Browser support is of course better for top/left than translate() but I'm not sure that's really relevant with the current browser support spectrum.

I'll try to figure out why top/left isn't working with my particular setup and update here!

[FezVrasta]

Thank you for the info. As far I know, there aren't big differences between the two, the only one that improves a lot the perf is3d because it moves the popper to a new layer... But maybe 2d is still much more performing than top/left, who knows 🤔

[remisture]

Any updated status on IE9 support?

[FezVrasta]

There was this PR, but the owner didn't sign the CLA so I closed it.

https://github.com/FezVrasta/popper.js/pull/330