React自定义Carousel组件跨多帧滑动时中间图片不渲染问题

问题根因 #

这个现象是Chromium 内核浏览器（Chrome、Edge、Opera）的默认性能优化策略导致的：
当页面长时间无用户交互时，Chromium 会自动降低非关键动画的渲染优先级，滑动/滚动过程中只会绘制起始和目标位置的元素，跳过快速路过的中间离屏元素的光栅化流程，以此降低功耗。用户主动交互（点击、滚动、按键）会触发渲染优先级提升，强制绘制所有经过的元素，因此交互时表现正常。Firefox 没有这套优化逻辑，所以不会出现该问题。

修复方案 #

直接修改轮播组件的 CSS 即可解决，不需要改动 JS 逻辑：

1. 给滑动容器（你代码中 .item_line 元素）添加 will-change: transform 属性，提前告知浏览器该元素会持续执行变换动画，不要跳过中间帧元素的渲染：

.item_line {
  will-change: transform;
  /* 保留你原有样式 */
}

2. 给所有轮播项内的图片添加 content-visibility: visible 属性，强制覆盖 Chromium 的自动可见性判断，禁止浏览器主动隐藏判定为“短暂不可见”的图片：

.item img {
  content-visibility: visible;
  /* 保留你原有样式 */
}

如果以上修改后还有偶现的闪烁，可以在动画执行期间每隔 80-100ms 主动触发一次无感知重绘（比如给滑动容器加1px的透明outline再移除），一般前两步即可完全解决问题。

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