HiDPI (Mac) 屏幕上的粘性交互问题

Question

最初，我只能在使用 Chrome 版本 65.0.3325.181 的 Mac Retina 显示器上重现。

但是，通过在 Chrome 开发者工具的设备列表中选择“带 HiDPI 屏幕的笔记本电脑”，我已经能够在 Windows 和 Linux 上的同一版本的 Chrome 中复制它。

如果您打开 HiDPI 屏幕设备选项并运行下面的 codepen，您会注意到该按钮最初会写入控制台。但是在向下滚动并关注非粘性内容后，按钮将不再是交互式的。看来，如果您多次单击并移动鼠标，它最终会再次起作用。

如果你去掉外部容器的高度和溢出，它确实可以工作，但是我想保留这个功能。

谁能想到另一种解决方法？

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);
}

我确实注意到了这个 Chrome 错误报告，但它看起来很老，这可能是一个更特殊的错误，最初已修复。 https://bugs.chromium.org/p/chromium/issues/detail?id=673538

Answer 1

这已在 Chrome 66 中得到修复。