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

Question

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?

Answer 1

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.

Answer 2

I managed to get a useable result with this:

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}