为什么HTML div在移动端Safari旋转时会短暂溢出父容器？

问题根因 #

这是Safari浏览器的已知渲染bug：当设置了border-radius+overflow: hidden的父容器包裹带transform过渡动画的子元素时，动画过程中父容器的圆角裁剪会临时失效，导致子元素溢出，Chrome的内核渲染逻辑不同所以不会触发该问题。

修复方案 #

1. 强制父容器启用GPU渲染层 #

给#circle添加GPU加速触发属性，强制Safari单独处理父容器的裁剪逻辑，修改对应CSS代码：

#circle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: tomato;
  overflow: hidden;
  /* 新增以下两行，二选一也可 */
  will-change: transform;
  transform: translateZ(0);
}

2. 补全子元素初始transform声明 #

Safari对未显式声明初始值的过渡动画容易出现计算偏差，给左右两个子元素补充初始旋转值：

#left {
  height: 100%;
  width: 100%;
  background-color: lightblue;
  transform-origin: right;
  opacity: 0;
  transition: opacity 0s, transform 250ms;
  transition-timing-function: ease-in;
  /* 新增初始旋转值 */
  transform: rotate(0deg);
}

#right {
  height: 100%;
  width: 100%;
  background-color: lightblue;
  transform-origin: left;
  opacity: 0;
  transition: opacity 0s, transform 250ms;
  transition-timing-function: ease-out;
  z-index: 1;
  /* 新增初始旋转值 */
  transform: rotate(0deg);
}

3. 兜底裁剪方案 #

如果以上修改后依然偶现溢出，可以给父容器添加mask属性兜底，Safari对mask的圆角裁剪支持稳定性更高：

#circle {
  /* 原有属性不变，新增以下两行 */
  -webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
  mask-image: radial-gradient(circle, white 100%, black 100%);
}

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