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

Question

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

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

Chrome 上 Mac 没有问题。

Chrome87.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 上创建一个新问题，并尝试提供有关此问题的详细信息。

感谢您的理解。

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

chrome + edge border trails on scale animation

google-chrome

css-animations

microsoft-edge