0

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;
}
terrorista
  • 227
  • 1
  • 15
  • Intro.js author is here. Can you please share an online example, jsFiddle maybe? – Afshin Mehrabani Jul 20 '16 at 13:16
  • hi, I updated the question, with a fix for mozilla, but in IE its still resizing. I found out that the problem was on `position: absolute` on `.introjs-fixParent` . if I remove from IE it works good. Nice work on the library btw :) – terrorista Jul 20 '16 at 13:31
  • cheers, yeah it's a known issue and I will find a solution for the next version. sorry about that. – Afshin Mehrabani Jul 20 '16 at 13:47

1 Answers1

0

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;
}
terrorista
  • 227
  • 1
  • 15