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:

joyride-issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:29 (9 by maintainers)

Top GitHub Comments

3reactions

nicubarbaroscommented, Jul 11, 2018

@keul Damn it. I just removed the spotlight for now. Great plugin but has this issue which is quite harmful.

2reactions

gilbarbaracommented, Dec 31, 2018

2.0.0-rc.1 adds a dirty fix for unused scroll parents with overflow that should handle most cases. If you still are having problems, let me know

Top Results From Across the Web

Appearance Tab - WalkMe Support

With Appearance settings, you can highlight or focus on a particular element or correct the position of your WalkMe items.

Issues with SAP GUI for Windows 7.60

In any multi column tree ALV there is a delay when scrolling. You can scroll your mousewheel for half a second and wait...

Rebuild the Spotlight index on your Mac - Apple Support

Choose Apple menu > System Settings. Click Siri & Spotlight in the sidebar, then scroll down and click Spotlight Privacy on the right....

How does the "position: sticky;" property work? - Stack Overflow

Case 3: Sticky related to "wrong / not scrolling" node (Tricky to fix). Again, Sticky offset relative to its nearest scrolling ancestor. I...

Multiple Choice Question - Qualtrics

The Select Box format displays answer choices in a list respondents can scroll through. Respondents can easily select multiple answer choices through several ......