parent position fixed will interfere the spotlight position

[roywang-lab]

🐛 Bug Report

A clear and concise description of what the bug is.

I have 4 items of a list, and want to render them as tabs, their grandparent container's position is fixed, because of the fixed attribute, the spotlight for each of the tab's position will be wrong, and while the spotlight's position is correct after I modified their grandparents' position.

To Reproduce

Steps to reproduce the behavior:
set the grandparent position fixed, also change its top to some value.

Expected behavior

A clear and concise description of what you expected to happen.
Even their grandparents position is fixed, the spotlight will still set the right position.

Link to repl or repo (highly encouraged)

Please provide a https://codesandbox.io/ demo or similar.

Issues without a reproduction link are likely to stall.

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

Paste the results here:

[gilbarbara]

Hey @roywang-lab
Issues without a reproduction link will probably stall.

[roywang-lab]

@gilbarbara please check the link: https://codesandbox.io/p/sandbox/react-typescript-forked-rw42xl?file=%2Fsrc%2FApp.tsx%3A21%2C47

I cannot see the spotlight after I start the joyride, seems something is affecting its position.

[wds33817]

@gilbarbara Plz check this, I am interested to see why global css will affect spotlight position. Thanks!

[gilbarbara]

Hey @roywang-lab
There are no steps in your example, so no tour to debug...

[dmitryshelomanov]

@gilbarbara The same issue persists: incorrect Spotlight behavior when the parent element has position: fixed.