Scrolling to an element causes modal overlay to appear in wrong place

[rswheeldon]

If I set up a tour with the following

    let tour = new Shepherd.Tour({
      useModalOverlay: true,
      defaultStepOptions: {
        scrollTo: true
      }
    })

And have a step in the tour which requires scrolling, then the window scrolls so the element is visible but puts the mask in the place which would have covered the element in its previous position.

[RobbieTheWagner]

Can you provide a reproduction of this? I've used scrollTo and seen the correct behavior.

[rswheeldon]

Thanks for the quick response. I've attached a one-page HTML example that demonstrates the problems.
On my setup, the paragraph starting "Sed quis facilisis sapien" is just at the bottom of the screen.

After some more digging, I found the culprit is the scrolling div within the page. If I remove the style elements from the div, everything works fine - i.e. if the page itself scrolls, it works, if some part of the page scrolls it doesn't.

shepherd-scroll-glitch.zip

[RobbieTheWagner]

@rswheeldon that makes sense, as our scroll listener is on the window, so scrolling other elements probably would not fire it.

[RobbieTheWagner]

@chuckcarpenter @BrianSipple how should we handle this? We probably do not want to add scroll listeners to every element on the page right?

[chuckcarpenter]

maybe see what element triggered the listener? Only reacting on window itself?