intro.js moves underlying elements to the left and overlapping each other

Question

I tried installing intro.js on a meteor project:

I am using bootstrap 3 and meteor. I am wondering whether the positioning of the elements needs to be displayed differently.

    var intro = introJs();

    intro.setOptions({
        steps: [
            {
                element: '#newGame',
                intro: 'welcome to step one'
            },
            {
                element: '#openModal',
                intro: 'step two challenge a friend'
            }
        ]
    });
    intro.start();



<a href="#" class="btn btn-primary" id="newGame">Play Random Opponent</a>
                        <button class="btn btn-primary" data-toggle="modal" id="openModal"
                                data-target="#challengeModal">Challenge a Friend</button>

Answer 1

There is currently an issue with the intro.js on webkit browsers. The library works great with fireFox and IE, but when it comes to Chrome/Opera/Safari it has that issue. The problem is with z-index.

for detail information about the issue visit: https://github.com/heelhook/chardin.js/issues/26

a detailed explanation on how z-index works with visit: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

If you want more simple library that does the same as intro.js then have a look at guide.js https://github.com/Dozyatom/guide.js

Answer 2

We were seeing a similar issue where once an element was targeted by introJS, it was appending a class called .introjs-relativePosition that was causing the position to shift slightly.

We solved the issue by overwriting the rule in the CSS

.introjs-relativePosition {
  position: initial !important;
}

Answer 3

Maybe you can use setTimeout function before introJs starts. This code below works for me

setTimeout(function() { introJs().start(); }, 5000);

Answer 4

I found a solution guys

well im not CSS guy but this works soo fine

.introjs-overlay {
    display: none !important;
}
.introjs-helperLayer {
border-radius: 0.5em !important;
border: 0.2em solid rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 0 0 1000em rgba(0, 0, 0, 0.7) !important;
pointer-events: none;
}

pointer-events: none; is the issue causing this issue