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

时间:2018-04-13 18:11:51

标签: css sticky

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

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

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

如果你带走了外部容器的高度和溢出,它确实有效,但是我希望保留这个功能。

有人能想到另一种解决方法吗?

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

1 个答案:

答案 0 :(得分:0)

这已在Chrome 66中修复。