Spotlight area are not illuminated

[JannisRln]

I am writing to report a bug I've encountered while using the Joyride library in my web application. The issue is related to the spotlight feature, where some elements are not being properly illuminated during the Joyride tour. As a result, the affected elements appear darker than expected and are difficult to read or interact with.

🐛 Bug Report

Some elements inside the spotlight area are not illuminated as expected and appear darker, affecting the user experience and overall effectiveness of the Joyride tour.

I have attached an image below that demonstrates the issue. In this image, you can see that the highlighted element inside the spotlight area is not properly illuminated and appears darker than it should be.

I have tried various troubleshooting steps, including checking for style conflicts, adjusting CSS z-index values. However, the issue persists.

I would appreciate any assistance or guidance on how to resolve this problem. If you require any additional information or clarification, please feel free to reach out to me.

To Reproduce

I would like to provide more context on reproducing the issue in my application, which is quite complex and, unfortunately, not feasible to set up in a CodeSandbox quickly. The specific step where the spotlight issue occurs involves the use of more additional libraries: Beautiful DnD, Re-resizable and Ionic. These libraries are integrated into the step to provide drag-and-drop, resizable functionality and UI Elemente, respectively. However, during the Joyride tour, some elements within the spotlight area are not being properly illuminated when this step is active. I understand that reproducing the issue might be challenging without a live example, but I hope this additional information can help you better understand the problem's context.

Expected behavior

All elements within the spotlight area should be consistently illuminated, making them easily visible and readable to the user.

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

Paste the results here:

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 12.39 GB / 31.73 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react-joyride: ^2.5.3 => 2.5.3 

[gilbarbara]

Hey @JannisRln

It's nearly impossible to understand what's happening without a reproducible example. The spotlight highlight uses mix-blend-mode that could be impacted by background color. You might want to check that. That said, I don't think it is a bug with the library but an implementation problem.

[JannisRln]

Thanks for your answer, I will check this.

[JannisRln]

I found a solution. I need to set a white Background for a parent div. 😊