带有溢出-y：滚动和固定高度的Chrome文本模糊答案

【问题标题】：Chrome text blur with overflow-y:scroll and fixed height带有溢出-y：滚动和固定高度的Chrome文本模糊
【发布时间】：2018-08-27 05:00:27
【问题描述】：

我有一个带有一些文本选项的自定义下拉菜单，我需要设置一个固定的高度。看起来很简单，我添加了max-height 和overflow-y: scroll。效果很好！但在 Chrome on device 模式下，高分辨率会使文本模糊。

这两个属性似乎不适用于 chrome。

max-height: 100px;
overflow-y: scroll;

我使用翻译、透视、平滑尝试了几个修复，但没有运气。有什么想法吗？

【问题讨论】：

当我在 Chrome 中以设备模式查看它时看起来不错（v.65，64 位，在 Mac 上）。我尝试了 1024px 宽度和 1280px 宽度。但是，当缩放为 100% 以外的任何值时，它就会变得模糊。我注意到当我改变设备宽度时，Chrome 改变了我的缩放。你能确认你的缩放是 100% 吗？
@BSK 是的，即使缩放为 100%，它仍然很模糊，例如 600 x 960。（Chrome，Windows 中的版本 65.0.3325.146（官方构建）（64 位））
如果它在实际设备上看起来不错，我会认为它是 Chrome 中的一个错误并为此提交一个问题。毕竟它只是一个通用模拟器，您的 QA 将使用真实设备或通过 BrowserStack 等可靠的工具完成。
你修好了吗？

【解决方案1】：

我想这与移动屏幕大小调整有关。将其设置为 100% 为我修复了它。希望对您有所帮助！

【讨论】：

【解决方案2】：

我也找到了使用高度的解决方案

height: 100%
max-height: 100px;
overflow-y: scroll;

【讨论】：