CSS Transition在iPhone Chrome中失效：点击触发的图片缩放无过渡

我之前也碰到过类似的iPhone Chrome下transform过渡动画失效的问题，结合你描述的场景——点击文本触发图标先缩小消失再放大显示，其他浏览器正常、仅iPhone Chrome无过渡的情况，给你几个针对性的修复方案：

1. 强制开启硬件加速 #

iPhone的Chrome有时候会因为GPU资源分配问题，忽略transform的过渡动画。可以通过will-change属性提前告知浏览器元素即将发生transform变化，或者用translateZ(0)强制触发硬件加速：

.che {
  transition: transform 200ms ease;
  /* 推荐方案：告知浏览器该元素即将有transform变化 */
  will-change: transform;
  /* 备选方案：通过3D变换强制触发硬件加速 */
  /* transform: translateZ(0); */
}

这个方法能让浏览器提前为元素分配GPU资源，避免动画直接跳变。

2. 明确transform的初始与目标状态 #

如果元素的初始transform状态没有明确设置，浏览器可能无法正确计算过渡差值。确保默认状态和每个过渡状态都有清晰的transform值：

/* 默认状态：明确初始缩放比例 */
.che {
  transition: transform 200ms ease;
  transform: scale(1);
}
/* 缩小消失状态 */
.che.shrink {
  transform: scale(0);
}
/* 放大显示状态 */
.che.grow {
  transform: scale(1);
}

同时在JS中要注意类名切换的时机，必须等缩小过渡完成后再切换到放大状态，比如监听transitionend事件或者用setTimeout匹配过渡时长：

const trigger = document.querySelector('.your-text-link');
const che = document.querySelector('.che');

trigger.addEventListener('click', () => {
  // 先触发缩小动画
  che.classList.add('shrink');
  
  // 等待缩小过渡完成（200ms），再触发放大动画
  che.addEventListener('transitionend', function onTransitionEnd() {
    che.classList.remove('shrink');
    che.classList.add('grow');
    // 移除监听避免重复触发
    che.removeEventListener('transitionend', onTransitionEnd);
    
    // 可选：动画完成后恢复初始状态
    setTimeout(() => {
      che.classList.remove('grow');
    }, 200);
  }, { once: true });
});

3. 避免与触发重排的属性同时变化 #

如果你的代码中同时修改了display、visibility或者position这类会触发页面重排的属性，可能会打断transform的过渡。建议只用transform（配合opacity）来实现显示/隐藏逻辑：

.che {
  transition: transform 200ms ease, opacity 200ms ease;
  transform: scale(1);
  opacity: 1;
}
.che.hidden {
  transform: scale(0);
  opacity: 0;
}

这样既实现了视觉上的消失/显示，又不会触发重排干扰过渡动画。

4. 检查浏览器与系统版本 #

部分旧版本的iPhone Chrome（或旧iOS版本的WebKit内核）存在过渡兼容性bug，建议尝试将Chrome更新到最新版本，或者检查iOS系统是否有可用更新，新版本通常会修复这类兼容性问题。

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