search

shipshapecode / shepherd

Guide your users through a tour of your app
https://shepherdjs.dev
Other
13.03k stars 647 forks source link

Shepherd step moves up and down continuously when target section is out of view #2965

Open anusha-c18 opened 1 month ago

anusha-c18 commented 1 month ago

I am using Shepherd to create a tour for a large, scrollable form. One of the steps is attached to a specific section in the form, and scrollTo is disabled for the tour.

The issue occurs when the user scrolls up, causing the target section to move out of view. As a result, the Shepherd step shifts to the bottom of the screen. However, once the arrow of the step touches the bottom of the viewport, the step begins to jitter, moving up and down.

This behaviour stops when the user scrolls slightly upwards, so the arrow is no longer at the very bottom of the screen.

chuckcarpenter commented 1 month ago

@anusha-c18 any chance you could submit a replication of this behavior in codesandbox or something like that? Also, would you expect the step to also scroll out of view or something else?

anusha-c18 commented 1 month ago

So it isn't to do with the target being out of view as shown in the video where the target is the Advanced accordion. I've attached a video for your reference

https://github.com/user-attachments/assets/b84ddb03-dc74-4b9a-89fd-ce772aa487d5

Also, would you expect the step to also scroll out of view or something else?

Yes, that would be ideal. If the target scrolls out of view, the step should follow and move with it.

anusha-c18 commented 1 month ago

We resolved this issue by setting the position of the shepherd-element class to fixed.

RobbieTheWagner commented 4 weeks ago

This seems like a bug in the flipping behavior. We try to flip and show on the other side if there is not room, so my assumption is it tries to flip and cannot so keeps trying back and forth because neither side has room. I wonder if there are any floating-ui bugs reported around this?