React-joyride: Spotlight gray background on v2.0.2 on Chrome and Firefox, but not on Edge
The following very basic sandbox with react-joyride v2.0.2 does not show the white spotlight as I expect, but rather the gray background. Update: here's the sandbox: https://codesandbox.io/s/pp4z3qp0p7
This happens in both Chrome 71.0.3578.98, and Firefox 64 (top two browsers in the screenshot), but actually works in Edge (bottom browser).
There seem to be related issues such as #438 and #349 but I haven't found an actual solution.
I can use the workaround of specifying background-color: white in styles.css in the sandbox to get it to work, but this seems clunky. To me this seems like a bug?
erikrenberg
All 2 comments
I think that's how mix-blend-mode works. It needs to have a background color in order to apply the hard-light effect.
I'm sure its implementation is buggy, but I don't know any other way to have a spotlight effect. I've used box-shadow in the past but it was bad.
If you can think in a better way to do it, feel free to submit a PR.
gilbarbara
on 9 Jan 2019
In my real app it wasn't working because I was setting the backgroundcolor for the body element. But by doing exactly as in the sandbox it actually works fine in my real app too; setting background-color on the root div of the app.
So I think I am happy with this solution, especially given that I certainly can't think of a better way to fix it :)
erikrenberg
on 10 Jan 2019
Related issues
shri3k
路
5Comments
yaskor
路
6Comments
jjordy
路
3Comments
rlajous
路
3Comments
msalsas
路
3Comments
Most helpful comment
In my real app it wasn't working because I was setting the
backgroundcolor for the body element. But by doing exactly as in the sandbox it actually works fine in my real app too; settingbackground-coloron the root div of the app.So I think I am happy with this solution, especially given that I certainly can't think of a better way to fix it :)