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

Most upvoted comments

@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.