vue-tour icon indicating copy to clipboard operation
vue-tour copied to clipboard

Position of the step is not updating as per the layout shifts of the element in the DOM

Open VenkateshDotdash opened this issue 1 year ago • 0 comments

Description I am currently working on implementing a product tour using vue-tour. Basically the user starts on one page and navigates across multiple pages to complete a task.

The problem i am encountering is when the user goes to another page the step appears on the corresponding element but suddenly because of layout shifts the element position gets changed in the DOM but the v-step position still points to the initial position of the element. When we scroll a little bit the step goes to the correct position. In desktop it's little okay but in mobile the issues seems to affect the user experience.

I tried using the resolve function to wait until the page loads but what happens is like the previous step content is shown on the new page until the page loads which is not expected to happen.

When the page gets completely loaded the v-step works perfectly. Since my scenario is to navigate users to different page the layout shifts are happening.

Expected behavior Does vue tour steps doesn't auto calculate the position if there are any layout shifts ? Any workaround to fix the issue.

VenkateshDotdash avatar Jun 04 '24 19:06 VenkateshDotdash