具有边框半径的 Safari CSS 转换答案

【问题标题】：Safari CSS transition on scale with border radius具有边框半径的 Safari CSS 转换
【发布时间】：2021-07-08 17:29:53
【问题描述】：

我在 Safari 上遇到了一个奇怪的问题。请看：https://codepen.io/enguerranws/pen/PomzqWe

如果您将鼠标悬停在浅红色框上，您会注意到内部元素的过渡。

如果您在 Chrome 或 Firefox 中对其进行测试，动画会按预期运行：这是一个按比例放大的黑色小圆圈。

在 Safari 上，它变得很奇怪：它是一个具有某种透明度的黑色正方形，在过渡结束时会变圆并且完全不透明。

以下是代码的相关部分：

#test:hover #circle {
  transform: scale(200);
}
#circle {
  position: absolute;
  transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  /* transition: all 1s ease; */
  width: 2px;
  height: 2px;
  top: 30px;
  border-radius: 10px;
  mix-blend-mode: difference;
  background-color: #000;
}

有没有人为此快速而肮脏的破解？

编辑：

实际上，我找到了一种解决此问题的方法，使用transform 的width 和height 值。

【问题讨论】：

标签： css safari

【解决方案1】：

尝试使用will-change: transform;。添加到您的代码中：

#test {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  padding: 40% 10px;
  background: rgba(255,0,0,.1);
}
#test:hover #circle {
  transform: scale(1);
}
#circle {
  position: absolute;
  transition: transform .5s ease-in-out;
  will-change: transform;
  transform: scale(.005); /* point */
  transform-origin:left top;
  width: 2px;
  height: 2px;
  top: 30px;
  border-radius: 400px;
  width: 400px;
  height: 400px;
  background-color: #000;
}

<div id="test">
  <div id="circle"></div>
  Text here  
</div>

【讨论】：