react-joyride: Highlight spotlight sometimes is displayed in improper position (scroll related)
Expected behavior
The highlight overlay should be placed normally
Actual behavior
In some cases if I use scrollToFirstStep the highlight overlay (please note: not the overlay of the first step! Weird…) is placed at the wrong position.
See image below:
The highlight overlay should be placed on the plus icon (note that the Floater is at the right position). All is working perfectly when i put scrollToFirstStep={false}.
Steps to reproduce the problem
That’s the sad part… I tried to reproduce with same React and Joyride versions at https://codesandbox.io/s/q7oopyqwkq with no luck. I’m not able to find what is going on there.
If you have any suggestion helping debug this issue let me know, I understand maybe I’m able to provide enough information, so feel free to close the issue if it’s not enough for an idea from your side.
React version
15.6.2
React-Joyride version
2.0.0-11
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 3
- Comments: 30 (9 by maintainers)
Commits related to this issue
- Dirty fix for issue #376 — committed to bopen/react-joyride by keul 6 years ago
- Dirty fix for issue #376 — committed to bopen/react-joyride by keul 6 years ago
- Update scrollparent.js Comment out to fix issues with react-joyride as per https://github.com/gilbarbara/react-joyride/issues/376#issuecomment-422044058 — committed to simonwaw/scrollparent.js by simonwaw 6 years ago
Did anyone get a fix for this?
@keul Damn it. I just removed the spotlight for now. Great plugin but has this issue which is quite harmful.
2.0.0-rc.1adds a dirty fix for unused scroll parents with overflow that should handle most cases. If you still are having problems, let me knowFor those who come across this issue and are looking for a solution, I was having a similar problem with the spotlight being offset when the user had scrolled slightly down the page. It ended up being that in my case I had
height: 100%on myhtmlelement and that was throwing off the auto scroller and by extension the spotlight positioning. Removingheight: 100%in my case resolved the issue and might be worth trying for those who run into a similar problem.I can confirm, my codesandbox above is now working! Thanks for your time, really appreciated.
@keul The
.nodeclass had anoverflow-yproperty, which messes up with the scrolling detection. I’m testing a new scroll parent detection to avoid this problem.@catamphetamine I still can’t reproduce this behavior. The spotlight works in all 5 demos, including while scrolling. Can you post a demo in codesandbox?
@gilbarbara tested the same codesandbox above (still https://codesandbox.io/s/q7oopyqwkq) after updating to 2.0.0-12 and I’ve the same issue (the gif I attached is still valid to reproduce the error).