Extreme error in method of creating highlight

[soanvig]

Hi!

I've been thinking about my own tutorial plugin, and I've come with the same idea of highlighting HTML elements as intro.js uses (I later found out intro.js in Google). I mean the z-index technique.

Unfortunately, I immediately came out with a problem this solution generates. Since it is using high value of z-index, it is fine until parent of highlighted element doesn't have z-index too. Then, the new stack of z-index is created, and the 'very high 9999 z-index' which is applied by intro.js is relative to the parent.

Therefore, if the highlighted element has the parent with z-index set (pretty common situation I think), the element is overlapped by overlay darkening element.

Why extreme? The tutorial plugin should be working without touching the original HTML/CSS of the site, it should be easy to use, and work in every situation. I can easily imagine thousands of cases when this error would come out.

[bozdoz]

Hello @soanvig:

This library does address issues of separate stacking contexts. I agree that it is not perfect and can't account for all situations. It's hard to say at this point what should be done about the cases where it doesn't work.

That said, is there a specific error you would like to address? Or do you have any recommendations?

[soanvig]

Good to hear that!

There's no specific error. I tested this issue with inspector and it occured. It seems that intro.js must solve this programmatically.

I was wondering, how would I do that in my own solution, and came up with simplest idea - to create new element (inserted at the end of body) with copied all computed styles (including browser styles to ensure inheritance to children) from element we want to highlight, and then, everything goes as intro.js does.

[bozdoz]

That is a solution. It's hard to say which is better.

I could see something like the following possibly being a better approach than current:

1. cloning an element,
2. applying computed styles on it,
3. force it to be absolute positioning, and
4. apply the top, left properties from getBoundingClientRect and scrollX, scrollY

Would be interested to hear what @afshinm thinks of that approach compared to the current approach. I must admit that I've only been using the introJs library for a month.

[levkazar]

Instead of relying on the z-index, you can simply place four seperate overlays around the highlighted element, like this (the surrounding divs are colored for illustration):

No need to change the z-index on the original elements. You just have to compute the correct location and width for each overlay tile and move them arround on the page.

[soanvig]

This would born new element, since there is only one ::before and one ::after available I guess

[stale[bot]]

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.