如何防止在Windows Chrome浏览器中进行缩放变换后滚动条模糊？

Question

我在尝试缩放HTML元素时遇到了一个奇怪的问题。正如这个CodePen上演示的，我希望该元素首先以缩小比例出现（transform: scale(0.1)），然后自行动画并缩放到其全尺寸（transform: scale(1)）。该元素是一个大列表，使用overflow: auto;限制高度，这意味着将显示滚动条。

我的问题是与其余元素相比，滚动条箭头未正确缩放，这使得它们对用户极为模糊和难以识别。这似乎只发生在Windows（10）中使用Chrome时。参见下面的屏幕截图：

我在Web上没有找到任何人谈论这个问题，但它似乎对我来说有些令人困惑，因为它似乎不是边缘情况，并且很容易复制。

非常感谢您提供的任何建议 :)

- Hugo

---

W10 Firefox会进行缩放，但Chrome和Edge（自2020年3月起使用相同的代码库）只显示滑块并隐藏箭头，直到动画“稳定”。这可能是由于浏览器内部CSS引起的，因此我预测需要大量工作才能使其正常工作，您需要深入浏览器开发并检查每个浏览器如何规避该行为。这值得您投入时间和精力吗？ - Rene van der Lende

实际上，减慢过渡速度根本没有帮助（即使将其设置为15秒之类的时间），你只会有更多的时间来看到箭头变得模糊。 - Hugo

Answer 1

将我的评论转化为一个正式的答案：

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

W10 Firefox 按预期进行缩放。

这是浏览器内部代码，因此我预测需要大量工作来避免问题，因为您需要深入浏览器开发并检查每个浏览器（HTML/CSS）如何避免该行为。

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

- Rene van der Lende

---

减慢动画速度并不能解决问题，即使减得更慢，问题仍然存在。关于投资，深入浏览器代码内部需要付出太多的努力，但由于这似乎是一个容易复现的错误，我将向浏览器提交错误报告。我仍然希望能找到一个完全避免这个问题的解决方案，目前我正在考虑在动画进行时隐藏滚动条作为一种解决方法。 - Hugo

@Hugo 没错，在Chrome和Edge上再次运行动画：没有模糊，但也没有箭头。我会调整我的答案。关于报告，我预计这不会得到高优先级。 - Rene van der Lende

Answer 2

你的代码只需要做出一点改变就可以解决这个问题。

通过透视和 translateZ 来改变比例。这会将元素缩小（因为它现在“远离”），并且似乎没有这个 bug：

setInterval(() => {
  const className = document.getElementsByTagName('main')[0].className
document.getElementsByTagName('main')[0].className = className ? '' : "shazam"
}, 2000)

main {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  margin: auto;
  overflow: auto;
  transform: perspective(100px) translateZ(-1000px);
  transition: transform 1500ms;
  transform-origin: top left;
}

.shazam {
  transform: perspective(100px) translateZ(0px);
}

  <h1>List of interesting things I've done during lockdown</h1>
<main>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>… Who cares about lists anyway?</li>
  </ul>
</main>

- vals