gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:52:57 25 4
gpt4 key购买 nike

最初我只能在 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

最佳答案

这已在 Chrome 66 中修复。

关于css - HiDPI (Mac) 屏幕上的粘性交互问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49822911/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com