Strange clipping effect on unhighlighted elements

[yogat3ch]

Hi @JohnCoene, Hope this finds you well! We're switching up the Cicerone guide after making a lot of modifications to the app that have changed selectors and the order or our guide. We've just started to encounter this phenomenon where elements that aren't currently highlighted suddenly disappear under the overlay. The unfortunate news is that I have no clue what's causing this and therefore can not reproduce it. The best I can do at this point is provide some screenshots of the phenomenon just in case you or someone else have encountered it. I've redacted some things since the app is not yet public but the issue should still be evident despite them. This screenshot depicts how the step that highlights our info icon .fa-info-circle causes the clipping to occur.

This screenshot depicts what the full absolutePanel looks like when the cicerone overlay is dismissed.

The first occurrence of the clipping happens at this step:

Here's what the underlying thing should actually look like:

A pattern I just recognized is that it appears to do the clipping when highlighting a non-ID selector, such as a class or compound selector. Of note, we have an on_next step that expands that element in the background between this step, and the step mentioned earlier. I thought that might be the issue, so I revised the cicerone to start with the absolutePanel expanded and that doesn't fix the issue, the clipping still occurs.

Any ideas will be much appreciated.

Update 2022-06-12 0843: It is also appearing that the steps don't advance any further when the elements that were previously collapsed are highlighted. The guide ends with a small highlight rectangle:

Is cicerone finding the objects to highlight in realtime? Or is it making a mapping of the highlighted areas at initialization? If it's the latter, I can see how that will cause a number of issues with any dynamic elements. If it's the former, then I'm unsure as to why it's not finding the appropriate elements. This may be a separate issue.

An additional note, the content of the element is handled by a uiOutput and is not in the UI module directly.

[yogat3ch]

Hey @JohnCoene, It looks like the issue arises from the CSS setting for .driver-fix-stacking applied by driver.js here. We added to our custom.scss the following to fix the issue:

.driver-fix-stacking {
  z-index: 1000 !important;
}

I think setting the z-index to auto causes the clipping when the highlighted element is embedded in multiple elements with specific z-index settings as in our absolutePanel there.

[JohnCoene]

Sorry I did not respond to this. Glad you found a solution.