Spotlight disappear for sticky target when scrollbar is visible

[viktormuller]

First of all, awesome package!

I have a problem that I cannot figure out. I have a sticky div that is the target of my tooltip, e.g.

<div class="md-sticky" id="child-output"> Some text here</div>

Where md-sticky is a class that is sticky:

.md-sticky{
    position: -webkit-sticky;
    position:sticky;
    top:64px;
}

When rendering my step it does not get highlighted.

{
  content: 
          <React.Fragment>
            <h3>{INTRO[3].title}</h3>
            <div>{INTRO[3].body}</div>
          </React.Fragment>, 
  target: '#child-output',
  placement: 'top' as 'top', 
  floaterProps: {disableAnimation: true}},

The spotlight element is in the DOM and it is in the right place of the right size and right styling. But the spotlight does not seem to blend with the overlay and hence just becomes another gray overlay making the area actually darker. If the target is not sticky or there is no scrollbar (i.e. the content fits on screen) the spotlight works flawlessly. It almost feels like the overlay and the spotlight somehow become separate stacks and just don't blend.

Oh btw, I am using react-bootstrap if that makes any difference (e.g. it sets z-index for most things to 1000-1070).

I tried to reproduce the issue in a barebone example but this one gets the same issue even when target is non-sticky and there is no scrolling. https://stackblitz.com/edit/react-ts-wea66c?file=index.tsx

Can anyone point me in the right direction?

Thanks in advance.

[viktormuller]

Sorry. This is a duplicate of #411