Highliting the targeting element is not correct

[julia-dizhak]

🐛 Bug Report

attached screenshot https://bit.ly/2kjR8JM
The target element is not correct.
After hovering on the element, highlighting will be set to correct element
version is "react-joyride": "2.0.0-15"

To Reproduce

Probably it's not happening consistently, only if you need to scroll to a target element in DOM.

Expected behavior

correct highlighting of the element

[gilbarbara]

It's impossible to debug without a live example...
Update to the latest version (2.1.1) and provide a working setup with the bug

[julia-dizhak]

Hi

To be honest, with version 2.1.1 the behavior even worst.

Yes, it impossible to debug without a live example. But the problem that it's difficult to provide actually playground because of it's highly specific. Like we have kind of chat where messages appear with an infinite scroll.

In a final decision, we used smoothscroll polyfill to be able to scroll to the correct target element and positions for spotlights

const element = document.querySelector(tour.step.target);
element.scrollIntoView({
    block: 'center' 
});

And thanks for your quick response.

[ekfuhrmann]

I was having an issue with the spotlight being offset when the user had scrolled slightly down the page. It ended up being that I had height: 100% on my html element and that was throwing off the auto scroller and by extension the spotlight positioning. Removing height: 100% in my case resolved the issue and might be worth trying for those who run into a similar problem.