React-joyride: Gray background V2

[borovik96]

In some blocks i have gray background, but in other blocks with same background colors i don't (see image below), it seems strange. Do you have any idea what may cause this issue?

Without overlay

With overlay

[gilbarbara]

What do you mean with a gray background? The overlay?
I couldn't understand what's going on with the image you sent. Is it correct or not?
Maybe you're targeting the wrong element? Can you post an example in codesandbox?

[borovik96]

I updated images, now the problem should be more clear. I have tried to change backround-color of my page to other color, but result the same. It worked great in V1, will try to reproduce it in codesandbox

[gilbarbara]

Please try to update to 2.0.0-10 and let me know if it works

[borovik96]

Still reproduced with 2.0.0-10. have tried to reproduce behavor in codesandbox, but couldn't

[gilbarbara]

It's impossible to know what is going on without seeing some code.

Review your steps and make sure you are not setting options you don't need to.

If you can reproduce this behavior on codesandbox, reopen the issue.

[michalkow]

I had the same problem. In my case, it is when using react-joyride on react-table. I think it is a CSS issue.
I managed to replicate error: https://codesandbox.io/s/o5q6rnrz1q
It is grey in Chrome but displays correctly in Firefox.

[gilbarbara]

@michalkow Feel free to submit a PR

[michalkow]

I am not that familiar with the CSS to solve the issue on my own. From what I understand overlay is using mix-blend-mode: hard-light; to display white spotlight? Can the way it is handled by different browsers be the issue?

[gilbarbara]

@michalkow I really can't say. It seems like a weird interaction with form elements. Or the way react-table render things.

[michalkow]

I solved it by setting white background on ReactTable, before no background color was set.

[gilbarbara]

Nice, I will try to understand if it's a requirement to mix-blend-mode and add to the FAQ.
Thanks