Issue with sticky interaction on HiDPI (Mac) screens

Question

Initially I was only able to reproduce on Mac Retina displays with Chrome version 65.0.3325.181.

However, I have been able to duplicate it in Windows and Linux on the same version of Chrome by selecting "Laptop with HiDPI screen" in the device list in Chrome developer tools.

If you turn on the HiDPI screen device option and run the codepen below you will notice that the button writes to the console initially. But after scrolling down and focusing on the non sticky content the button will no longer be interactive. It appears that if you click a lot and move the mouse around it will eventually work again.

If you take away the height and overflow on the outer container it does work, however this functionality I would like to preserve.

Can anyone think of another workaround?

https://codepen.io/acarl/pen/MVdzZj

HTML

<div class="container">

  <div class="sticky">
    <button onclick="console.log('clicked')">
       write "clicked" to console
    </button>
  </div>

  <div class="content">
  </div>

</div>

CSS

.container{
  height: 300px;
  overflow-y: auto;
}

.sticky {
  background-color: #ccc;
  padding: 2rem;
  position: sticky;
  top: 0;
}

.content {
  height: 800px;
  background: linear-gradient(red, yellow);
}

I did notice this Chrome bug report, but it appears pretty old and this may be a more special case of the bug orginaly fixed. https://bugs.chromium.org/p/chromium/issues/detail?id=673538

Answer 1

This has been fixed in Chrome 66.