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

Question

我在尝试缩放 HTML 元素时遇到了一个奇怪的问题。如本 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）如何避免该行为。

这值得您花费时间和精力吗？