css - 转换比例后如何防止 Windows Chrome 上的滚动条模糊？

Question

我在尝试缩放 HTML 元素时遇到了一个奇怪的问题。 As demonstrated in this codepen ，我希望元素看起来按比例缩小( transform: scale(0.1) )，然后为自身设置动画并放大到其全尺寸( transform: scale(1) )。该元素是一个使用 overflow: auto; 限制高度的大列表，这意味着显示滚动条。

我的问题是滚动条箭头与其他元素相比没有正确放大，这使得它们非常模糊并且用户无法识别。使用 Chrome 时，这似乎只发生在 Windows (10) 上。下面的cf截图



我一直无法在网上找到任何人谈论这个问题，这对我来说似乎有点令人困惑，因为它似乎不是一个边缘情况，而且重现起来非常简单。

提前感谢您的任何建议:)

Answer 1

将我的评论变成正确的答案:

放慢动画速度，您可以看到 W10 Chrome 和 Edge 的图形引擎(自 Edge 2020 年 3 月起使用相同的代码库)在动画期间简单地跳过某些滚动条“绘制”，仅在缩放时显示拇指...

但是，W10 Firefox 会按预期进行缩放。

这是浏览器内部代码，因此我预测需要做很多工作来规避这个问题，因为您需要深入浏览器开发并检查每个浏览器 (HTML/CSS) 如何避免这种行为。

这值得你花时间和精力吗？