search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.62k stars 519 forks source link

Spotlight doesn't work in Webkit #1001

Closed ahockersten closed 4 months ago

ahockersten commented 4 months ago

🐛 Bug Report

When using webkit-based browsers, the spotlight becomes a gray opaque box and does not show the element below properly. See screenshot (this is Epiphany 45.2, but it apparently reproduces on Safari on MacOS/iOS as well. I don't have access to these so I can't verify or provide additional version information there): image

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://react-joyride.com/
  2. Click "Start tour"
  3. Click "Next"

Expected behavior

Spotlight should work as on Gecko/Blink

Link to repl or repo (highly encouraged)

N/A

Run npx envinfo --system --binaries --npmPackages react-joyride

N/A

ahockersten commented 4 months ago

Obviously this is what tried to originally fix it: https://github.com/gilbarbara/react-joyride/commit/52d7fb21c769ef5e1984d36053322749167f621e

The code correctly applies the above on Epiphany as well, but it seems the workaround has stopped working as intended at some point. Removing it unfortunately does not help.

gilbarbara commented 4 months ago

Hey @ahockersten I just tested the spotlight in Safari Desktop/Mobile, and it works properly. Unfortunately, I can't support every browser, just the major ones. Anyway, feel free to submit a PR.

ahockersten commented 4 months ago

@gilbarbara that's odd, because I got user reports of the issue on Safari, but that was in my own usage of react-joyride, so I assumed since I could reproduce on Epiphany that it was also an issue there.

Totally understand not supporting minor Webkit browsers, neither do I. :sweat_smile:

I'll open a new issue or a PR if/when I can reproduce this (or something similar) on Safari.

Thank you for your prompt response and an excellent library!