React-joyride: No overlay for centered step on Microsoft Edge

[monsieurnebo]

There is no overlay on Edge, for a centered step.

The bug can be see on the official demo:

Moreover, it seems that the following style isn't taken on account on Edge:

  spotlight : {
    borderRadius : 0
  }

[monsieurnebo]

I just discoverd that the same two bugs are observable on Google Chrome for Android.

[gilbarbara]

Feel free to submit a PR

[gilbarbara]

I've found the culprit, it's the browser detection function and I'll improve it.

About the borderRadius it's a bit weird. I don't think those two browsers need prefixing but I'll dig deeper.

[monsieurnebo]

@gilbarbara If you're having troubles in browser detection, this resource is the most reliable we found so far.

You may also take a look on browserhacks, but everything isn't working.

PS. I see that the v2 branch doesn't exist anymore, but the current npm version is still v1.x ? 🤔

[gilbarbara]

Fixed in [email protected]

[monsieurnebo]

Thanks for the fix! 👍

For your information, the overlay also seems to be invisible on iOS browsers.

[gilbarbara]

@monsieurnebo Oh shit. I'll fix it tonight...

[gilbarbara]

@monsieurnebo I'm seeing the bug with Chrome on iOS but Safari looks fine.
Can you confirm?

[gilbarbara]

@monsieurnebo fixed in 2.0.0-13

[monsieurnebo]

I was encountering this issue on the following iOS browsers: Chrome, Firefox and Opera (but not Safari, you're right).

I will try the fix and keep you informed.

[monsieurnebo]

@gilbarbara I just tried the 2.0.0-13:

Browser | Result
--- | ---
iOS Chrome | ✅
iOS Firefox | 🔴
iOS Opera Mini | 🔴

[gilbarbara]

@monsieurnebo
Opera Mini apparently don't behave with the box-shadow hack either. Does it show a gray box or a weak shadow?
Firefox and Opera Mini will work with 2.0.0-14

[monsieurnebo]

Overlay is now working on both iOS Firefox & Opera Mini !

Great job 🎉