Content is Whited Out and Barely Visible

[Shawful]

Has anyone noticed that when placing id='step1' on an image or text, angular-intro.js will place a white transparent section which covers the content? I want the content to pop, not be covered up.

Any idea what I might have done wrong?

Has anyone else encountered this and know of a work around? or fix?

[Shawful]

using z-index in css does not resolve the problem.

[Shawful]

I tried setting overlayOpacity: 0, but that doesn't work either.

IF I could get the overlayOpacity option to work, what would be a valid range of numbers [0 -100]? [0.0-1.0]?

[Shawful]

I foud out the range is [0.0-1.0], but that doesn't affect the whited out content, just the darkened rest of the screen.

[Shawful]

After opening app > bower_components > intro.js > introjs.css, I was able to toy around with the z-index and transparency for the .introjs-helpLayer and .introjs-overlay css classes.

However, I can't exactly match the content brightness in the plunker example. Any ideas?

It appears that I have to overlay my content with a white emphasis block (.introjs-helperLayer), but I have to make the white at just the right level of transparency so that the content is visible. However I set it, the overlay darkens the content I'm trying to emphasize... so My site is kind of in an odd state at the moment. I would really appreciate any help on this!

Cheers!

[Shawful]

Is there a set of preferred z-index settings to get the same output as the plunker demo?

[Shawful]

I think the site linked below demonstrates the issue I'm currently having (Even if it is another angular open source's demo).

http://dutchcoders.github.io/angular-tour/

[igmcdowell]

I ran into the same problem. This is most likely a stacking-context issue.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

I didn't write the plugin, but I'm pretty sure for it to work properly the element being highlighted needs to be in the same stacking context as the transparent background. Otherwise the transparent background sits above the thing being highlighted and the opacity is applied. It looks like the plugin does some work to try and erase other stacking contexts; specifically it adds this rule:
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
}

However, there are other ways to create stacking contexts (e.g. applying a transform rule).
I forked the default plunker and added a transform, you can see it here: http://plnkr.co/edit/VFmvq7Q2ox4xe8BU0zeg?p=preview

Click the demo button and I'm pretty sure you'll see the effect you're describing. The only difference between my plunker and the official is this extra css rule:

.jumbotron {
transform: translateX(0%);
}

Hope that helps!

EDIT: Note that this is definitely an issue in the underlying intro.js plugin; I don't think it has anything to do with the angular wrapper.

[Shawful]

I have made these layers the same, but it did not resolve the issue. I've
been toying with this all day and am no closer than before. Despite how I
set the z-index, the content highlighted by intro.js still has a z-index=0,
but so does everything else on the page, so it either highlights
everything, is buried under the other contents of the page, or completely
censors out the content that I wish to highlight. :( le sigh

On Tue, Nov 4, 2014 at 3:47 PM, Ian McDowell notifications@github.com
wrote:

I ran into the same problem. This is most likely a stacking-context issue.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

I didn't write the plugin, but I'm pretty sure for it to work properly the
element being highlighted needs to be in the same stacking context as the
transparent background. Otherwise the transparent background sits above the
thing being highlighted and the opacity is applied. It looks like the
plugin does some work to try and erase other stacking contexts;
specifically it adds this rule:
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
}

However, there are other ways to create stacking contexts (e.g. applying a
transform rule).
I forked the default plunker and added a transform, you can see it here:
http://plnkr.co/edit/VFmvq7Q2ox4xe8BU0zeg?p=preview

Click the demo button and I'm pretty sure you'll see the effect you're
describing. The only difference between my plunker and the official is this
extra css rule:

.jumbotron {
transform: translateX(0%);
}

Hope that helps!

—
Reply to this email directly or view it on GitHub
#33 (comment)
.

[igmcdowell]

To clarify, z-index is relative to stacking context, there's no such thing as an absolute z-index. So you could have element 1 with a z-index: 100000, and element 2 with a z-index: 1, but element 2 can show on top. This happens when element 2 is on a stacking context that sits on top of the stacking context of element 1. I made the simplest plunker I could think of to show this: http://plnkr.co/edit/qjGGMBtRhADGCRsEixW1?p=preview

[NeevShah]

Hi all, I had same issue. The problem was I was applying background color to parent element. After I applied background color to the element this issue was resolve.. Please correct me if I'm wrong..

[lfreneda]

Same as here, did you guys solve this problem?

[rammoozz]

I am having the same issue, is there a status update on this?

[chino23]

+1
this is pretty bad sometimes. will this get fixed? or anyone got a solution?

[lfreneda]

@chino23 I ended up using other intro plugin :(

[chino23]

@lfreneda which one?

[lfreneda]

@chino23 > https://github.com/xbsoftware/enjoyhint

[chino23]

Thanks!

[brianfleming]

I have been experimenting with this directive and was seeing the same issue.

On a parent, of the tour element that was showing the problem, I have this css declaration:

-webkit-transform-style: preserve-3d;

That declaration helps with some transition effects that are applied to other children.

To fix the issue, I updated the introjs.css to be:

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1.0 !important;

  -moz-transform-style: inherit !important;
  -webkit-transform-style: inherit !important;

  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}

so removing the child 3d space that the transform-style created fixed the issue.

Hope this helps others.

[DiegoFSFlor]

@Shawful
I'm with the same mistake
is overlapping

some help ?