使用GSAP缩放容器时border-radius显示异常的问题排查与解决

我正在尝试实现一个容器缩小并添加圆角的动画，但发现容器缩放时border-radius显示异常，上下边缘出现截断情况。以下是简化后的代码片段：

JS代码 #

const tl = gsap.timeline({paused: false, repeat: 0});
const animatedExample = document.getElementById('example-1');
tl.to(animatedExample, 1, {scaleX: .5, borderRadius: '15px'});

CSS代码 #

.example {
  top: 30px;
  position: absolute;
  width: 300px;
  height: 300px;
}
#example-1 {
  border: solid 2px darkblue;
}
#example-2 {
  border: solid 2px darkred;
  border-radius: 15px;
  left: 400px;
}

HTML代码 #

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<html>
  <div id="example-1" class="example"></div>
  <div id="example-2" class="example"></div>
</html>

希望了解：

1. 该问题产生的原因是什么？
2. 如何解决这个问题？

1. 问题产生的原因 #

当同时对元素的scaleX和border-radius做动画时，浏览器渲染逻辑导致异常：scale变换仅改变元素的视觉渲染尺寸，元素的原始布局盒大小并未改变，但border-radius是基于原始布局盒尺寸计算的。同时浏览器默认会裁剪超出原始布局盒的内容，缩放后圆角的上下边缘会超出原始盒模型范围，因此被截断显示不全。

2. 解决方法 #

有两种可靠的修复方案：

• 方案一：替换scaleX为width动画
  直接修改元素宽度实现缩小效果，border-radius会基于实时变化的宽度计算，不会出现截断问题：

  const tl = gsap.timeline({paused: false, repeat: 0});
  const animatedExample = document.getElementById('example-1');
  tl.to(animatedExample, 1, {width: 150, borderRadius: '15px'});
  

• 方案二：添加overflow: visible属性
  保留缩放动画，给目标元素设置overflow: visible，让浏览器不裁剪超出原始布局盒的内容，圆角即可完整显示：

  #example-1 {
    border: solid 2px darkblue;
    overflow: visible;
  }
  

  注意：这种方式可能导致缩放后的元素覆盖页面其他元素，需根据实际布局调整。

内容的提问来源于stack exchange，提问作者tganyan