Safari中粘性滚动动画图片闪烁问题求助

问题根源是同时对布局属性（left/inset）和合成属性（transform）执行动画：left会触发浏览器重排（Layout），transform触发合成（Composite），Safari在处理这两类属性同时动画时容易出现渲染冲突导致闪烁。之前的-webkit-相关hack针对的是3D变换的渲染层问题，没法解决这种跨阶段的动画冲突。

解决方案：仅用transform实现定位动画 #

把原本通过left/inset实现的偏移完全替换成transform的translateX/Y，这样全程只触发GPU加速的合成阶段，避免重排，彻底解决闪烁。

修改后的CSS

.img__container {
  position: sticky;
  top: 0;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
img {
  position: absolute;
  /* 只针对transform做过渡，避免不必要的属性动画 */
  transition: 0.5s transform ease-in-out;
  object-fit: contain;
  aspect-ratio: 21/9;
  height: 100%;
  /* 初始位置用transform设置 */
  transform: translateX(0);
}

调整JS逻辑

把原本设置left/inset的代码，替换成设置transform的translateX：

// 示例：替换前的代码
// img.style.left = `-${offset}px`;

// 替换后的代码
img.style.transform = `translateX(${-offset}px)`;

// 如果需要同时调整垂直位置，组合使用translateY
// img.style.transform = `translateX(${-offsetX}px) translateY(${-offsetY}px)`;

原理说明 #

transform属于浏览器的合成属性，动画时会直接交由GPU处理，不会触发页面重排或重绘；而left/inset是布局属性，动画时会不断触发浏览器重新计算布局，两者同时动画时，Safari的渲染管线容易出现同步问题导致闪烁。改用纯transform动画后，全程在合成阶段完成，彻底避开冲突。

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