缩放动画上的 chrome + 边缘边框轨迹

Question

我发现浏览器错误了吗？ 更新：是的，我有。在https://bugs.chromium.org/p/chromium/issues/detail?id=1169075 提交的错误。

当border 或outline 属性添加到此<div> 时，css scale 动画会留下痕迹。当然我没有做错。这发生在 Chrome 和 Edge 上（我相信它们现在使用相同的引擎）。

在 Mac 版 Chrome 上没有问题。

Chrome 87.0.4280.141
边缘 87.0.664.75

@keyframes sqwhere-hover {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
    ;
  }

  100% {
    transform: scale(1);
  }
}


.sqwhere {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  animation: sqwhere-hover 2s infinite;
  border: 1px solid black;
}

<div class="sqwhere"></div>

Answer 1

我尝试使用 MS Edge Chromium 和 Google Chrome 浏览器测试该问题。我可以重现上述问题。

由于该问题在 Edge 和 Chrome 浏览器中都可以重现，因此该问题可能与 Chromium 浏览器引擎有关。

在我的测试结果中，我注意到仅当我们将 transform: scale 值传递为 1.1、1.2、1.3 等时才会出现问题。

此问题的快速解决方法是将 transform: scale 值传递为 1、1.5、2、2.5 等。

示例：

50% {              
         transform: scale(1.5);                
    }

在 Edge 浏览器中使用 scale(1.5) 测试结果：

此外，我建议您在Chromium issues site 上创建一个新问题，并尝试提供有关此问题的详细信息。

感谢您的理解。