Intro.js: highlighted area doesn't work as expected

html, intro.js, javascript

Solution

Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

This will solve your problem. Hope it helps as it did for me! Shout to @weili1977 and @exoJSON who provided the answer in GitHub.

Problem

I'm using the very interesting javascript library intro.js. However, in my application, the highligted area becomes almost completely white. I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?

Original source