缩放动画在放大和缩小时打破边界半径

Posted 2023-03-06

【中文标题】缩放动画在放大和缩小时打破边界半径

【英文标题】：Scale animation breaks border radius when zoomed in and out

【发布时间】：2021-01-23 19:12:58

【问题描述】：

我正在运行以下代码sn-p：

#mydiv
  width: 2px;
  height: 2px;
  border-radius: 50%;
  display: inline-block;
  margin: 100px;
  background-color: red;
  animation: wave 1s infinite;


@keyframes wave
  0%
    transform: scale(1, 1);
  
  100%
    transform: scale(100, 100);
  

<div id="mydiv"></div>

通常这个动画运行良好。当我放大和缩小屏幕时会出现问题。放大然后缩小后，我看到边界半径开始显示不正确。我已经截取了两张截图：

第一张图片是在 Microsoft Edge 上拍摄的。它发生在我使用 CTRL+ 和 CTRL- 放大和缩小时。在 Chrome 中做同样的事情也会导致类似的结果。第二个发生在我使用 Chrome 开发工具放大和缩小时。我在 android 版本的 Chrome 中也遇到过这种情况（这是我首先注意到的地方）。这在 Firefox 中没有发生。

我不知道为什么会这样，但我的猜测是，放大和缩小突然影响了 CSS 变换的计算。

这个错误的真正原因是什么？有解决办法吗？

【参考方案1】：

试试这个

#mydiv
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    margin: 100px;
    background-color: red;
    animation: wave 1s infinite;


@keyframes wave
    0%
        transform: scale(0);
    
    100%
        transform: scale(1);
    

<div id="mydiv"></div>

【讨论】：

谢谢，看起来它消除了错误计算边界半径的机会，它的工作没有错误。