shepherd: Content is blocked by "hidden" steps
When a tour is hidden because the target is not visible on the page (e.g. because of a media query), it is blocking/masking the content behind it. This is because it’s still rendered (always in the top-left corner of the document) with just opacity: 0;.
Is this a known problem?
Demo
https://codepen.io/snap/pen/yLYXQmG
Possible fix
.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
opacity: 0;
pointer-events: none; /* <- added */
}
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 22 (22 by maintainers)
Commits related to this issue
- Fix content being blocked by hidden steps Fixes #934 — committed to shepherd-pro/shepherd by RobbieTheWagner 4 years ago
- Fix content being blocked by hidden steps (#946) * Fix content being blocked by hidden steps Fixes #934 * Update src/js/components/shepherd-element.svelte Co-authored-by: Matthijs Kuiper <in... — committed to shepherd-pro/shepherd by RobbieTheWagner 4 years ago
@sn3p I believe I have a fix https://github.com/shipshapecode/shepherd/pull/946 mind taking a look to see if it works for your use cases?
@sn3p sorry, I missed where you said it was not the modal overlay. We’ll have to take a look then.