Intro.js: introjs in Ionic 2, screen is black in iOs

Created on 15 Dec 2016 · 6Comments · Source: usablica/intro.js

Hi, I am using introjs in a mobile app developed with Ionic 2 (Angular 2). Everything works great in Android, but in iOs, the screen is black, only the highlighted element, the helperlayer, and the tooltip reference is shown, as in the picture below:
capture

As I investigated further, the main screen is revealed when I change the z-index of the introjs-fixParent class to a number. But at the same time the highlighted element is covered (the z-index in introjs-showElement doesn't work anymore).

I tried different things, but still I haven't been able to solve the problem. Please help me!!

wontfix

Source

namgiang

Most helpful comment

I manage to get around this problem. If you want it to work on IOS all you need to do is to replace/ overwrite :
.introjs-fixParent{z-index:auto!important
before

To
.introjs-fixParent{z-index:999999!important
after

After that is seems to work on IOS and it looks like it doesn't affect Android

zephylac on 24 Jul 2018

👍3

All 6 comments

Hi there,

Did you ever figure this one out? I am running into a similar issue.

CottleC on 9 Feb 2017

Hi, I couldn't solve it, and introjs won't support this. So I made this from scratch, getting inspirations from how they do it in introjs. And it turned out really easy to do, the result is more lightweight and easier to customize than introjs. Good luck!

namgiang on 10 Feb 2017

Very cool, good job! Thanks for the reply :)

CottleC on 10 Feb 2017

@namgiang care to share a blueprint of how you solved it so that others might tackle this as well?

masimplo on 16 Mar 2017

👍3

I manage to get around this problem. If you want it to work on IOS all you need to do is to replace/ overwrite :
.introjs-fixParent{z-index:auto!important
before

To
.introjs-fixParent{z-index:999999!important
after

After that is seems to work on IOS and it looks like it doesn't affect Android

zephylac on 24 Jul 2018

👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.