bootstrap-tourist icon indicating copy to clipboard operation
bootstrap-tourist copied to clipboard

Offset calculation of highlighted element is wrong sometimes

Open diesl opened this issue 5 years ago • 3 comments

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

diesl avatar Dec 15 '19 23:12 diesl

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.

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")
                                  }

angek avatar Mar 05 '20 07:03 angek

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

vladrusu avatar May 13 '20 15:05 vladrusu