IGreatlyDislikeJavascript / bootstrap-tourist

Quick and easy way to build your product tours with Bootstrap Popovers for Bootstrap 3 and 4. Based on Bootstrap-Tour, but with many fixes and features added.
63 stars 36 forks source link

Offset calculation of highlighted element is wrong sometimes #44

Open diesl opened 4 years ago

diesl commented 4 years ago

Sometimes, the offset calculation of the highlighted square is wrong. I am not sure why this is happening, but now I figured out how to reproduce it.

Steps to reproduce:

  1. Open docs.html, then start the tour
  2. Go to step 2. Box is correctly aligned with element #intro
  3. Go back to step 1
  4. Go to step 2 again. Box is incorrectly aligned with an offset.
  5. Go back to step 1
  6. Go to step 2 again. Offset is doubled
IGreatlyDislikeJavascript commented 4 years ago

Yep, that's odd. I can reproduce this in my local env, but only on some pages. sbadmin template seems susceptible to it. Needs some investigation, please leave it with me.

angek commented 4 years ago

So I took a look at docs.html and was able to reproduce the offset issue as described by @diesl In this specific instance I noted:

  1. when navigating from an orphaned step 1 to step 2, the offset is set to top:119 and left:0
  2. when navigating back to step 1 the highlight is hidden (as expected) in order to display the orphaned step.
  3. when navigating, once again, to step 2, I expected the offset to once again be set to top:119 and left:0. What I found was that, instead of it (offset) being reset, it is being incremented by another 119 resulting in an offset of top:238 and left:0

I think that resetting the offset when hiding the highlight should do the trick?

was thinking something like, adding a reset before calling fadeOut(), at around line 135: so we take it from:

highlightHide:          function(domElement, step)
                                 {
                                         domElement.fadeOut("slow")
                                 }

to this?

highlightHide:          function(domElement, step)
                                  {                                                                        
                                          domElement.width(0).height(0).offset({top:0, left:0});
                                          domElement.fadeOut("slow")
                                  }
vladrusu commented 4 years ago

+1 for this bug fix... I don't know if it's the correct solution, but .. it works!