iOS Chrome中transform过渡动画失效：求助原因分析与解决方案

问题情况 #

在iOS 16.2系统的Chrome 109.0.5414.83浏览器中，输入框聚焦时，相邻label元素的transform过渡动画会直接跳转到目标状态，没有平滑过渡效果；但在同版本iOS的Safari浏览器中，该动画可正常执行。

复现代码 #

HTML代码 #

<div class="test">
  <input type="text" placeholder="Text"/>
  <label class="label">Text</label>
</div>

（注：原代码未给元素添加对应类名，此处补充以匹配CSS选择器）

CSS代码 #

.test {
  display: flex;
  flex-direction: column;
  position: relative;
}
.test input:focus {
  border: 1px solid red; /* 修正原代码拼写错误：soled → solid */
  outline: 2px solid red;
}
.test input:focus + label {
  color: red;
  opacity: 1;
  transform: translateX(-34px) scale(0.6);
}

.label {
  position: relative;
  font-size: 30px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

有没有其他开发者碰到过？ #

有，不少开发者在技术社区反馈过iOS Chrome中类似的兼容性问题，尤其是涉及transform、transition与表单元素交互的场景。

问题成因 #

1. iOS Chrome的WebKit内核差异：iOS上所有第三方浏览器（包括Chrome）都必须使用苹果提供的WebKit内核，但Chrome会对内核做自定义修改，导致部分渲染逻辑与Safari不一致。在输入框聚焦触发兄弟元素过渡的场景中，Chrome可能未正确捕获状态变化，直接应用最终样式。
2. 渲染优先级冲突：Chrome处理输入框聚焦事件时，可能优先处理表单元素的状态变更，忽略了兄弟元素的过渡动画队列，导致动画被跳过。
3. 代码错误的间接影响：原代码中存在CSS属性拼写错误（soled），虽不直接影响动画，但可能触发浏览器渲染引擎的异常分支处理，间接导致动画失效。

可行解决方案 #

• 指定具体过渡属性：将transition: all 0.2s ease改为明确的属性列表，比如transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease，减少浏览器属性计算负担，提升兼容性。
• 开启硬件加速：给label元素添加will-change: transform或transform: translateZ(0)，强制浏览器启用硬件加速，确保过渡动画被正确渲染：

  .label {
    /* 原有样式 */
    will-change: transform; /* 或使用 transform: translateZ(0); */
  }
  

• 调整元素定位方式：将label的position: relative改为position: absolute（配合父元素position: relative），改变元素渲染层级，避开Chrome的渲染优化bug。
• 修正代码拼写错误：把CSS中的soled改为solid，避免浏览器进入异常渲染路径。

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