<div class="wrapper">
  <div class="spacer"><h1>Scroll down, the instructions are in the popover. Bug ONLY occurs in Chrome</h1></div>

  <button class="btn1" popovertarget="popover1">
    click me
  </button>

  <div popover="auto" id="popover1">
    <p>Popover1</p>

    <button class="btn2" popoverTarget="popover2">
      click me too
    </button>

    <div popover="auto" id="popover2">
      <p>Popover 2</p>
      <p>Hover the button below. Notice it won't trigger. For it to trigger, you need to move your mouse over the button,
        then move UP on the Y axis (so make sure the X would still be over the button too). 
        It could be you need to scroll slightly back up to find the target.
      </p>
      <p>If you would remove the spacer at the top of the page (and thus the popover wouldn't require scroll), the hover would work straigth away.</p>
      <button class="hover-btn">Hover this button</button>
    </div>

  </div>

  <div class="spacer"></div>
</div>

<script src="index.js"></script>