If helperElementPadding=0, the element overlaps the shadow which highlights it.

[sammuell]

Description

If helperElementPadding=0, the element overlaps the shadow which highlights it.

Expected Behavior

The border should not overlap the indicator shadow.

Actual Behavior

The border of the referenced element overlaps the shadow.

It's a z-index problem (the element is in front of the shadow).

Errors and Screenshots (optional)

Example (recommended)

On the demo page use the following code:

.card {
  border-radius: 0 !important;
  border: 1px solid red;
}

introJs().setOptions({
  helperElementPadding: 0,
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'This step focuses on an image'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();