Search code examples
firefoxmozillaintro.js

intro.js not working well on mozilla with fixed elements


I'm using intro.js for tutorials in my website. It's working well on chrome, but now I tried in Mozilla Firefox and the window is moving when highlighted. Anyone know why this is happening ?

EDIT:

I fixed for mozilla firefox, updating the css, however for IE it's still not working

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .introjs-fixParent {
        position: absolute !important;
    }
}
.introjs-fixParent {
    z-index: auto !important;
    opacity: 1.0 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}

Solution

  • My solution to solve this was by editing the orignal intro.js css:

    **This works for mozilla firefox and IE

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .introjs-fixParent {
            position: relative !important;
        }
    }
    
    .introjs-fixParent {
        z-index: auto !important;
        opacity: 1.0 !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transform: none !important;
    }