React/CSS中transform:translate()过渡致Flexbox元素错位问题

问题现象 #

• 在Flexbox容器内通过transform: translateX()移动所有元素时，部分元素在过渡动画期间会出现错位，动画结束后恢复原位，首次出现该异常的是第13个元素
• 元素偏移量越大，错位问题越严重

排查过程 #

• 仅在Chrome、Edge浏览器复现该问题，Firefox表现正常
• 已精简CSS代码（仅保留主容器基础设置），问题仍存在
• 最终定位问题源于图片尺寸/位置的重计算逻辑异常

解决方案 #

给图片元素或其外层容器添加overflow: hidden属性后，错位问题完全解决，暂未明确该属性修复问题的具体底层原因

相关代码 #

React组件代码

<div
  key={index}
  className="item-container"
  tabIndex={active ? 0 : undefined}
  style={{
    transform: `${activeItem < itemRefs.current.length - 4 ? `translateX(-${activeItem * 100}%)` : undefined}`,
  }}
  ref={(ref) => (itemRefs.current[index] = ref)}
>
  <img src={url}/>
</div>

CSS样式代码

.item-carousel {
  height: 30%;
  display: flex;
  overflow-x: hidden;
}
.item-container{
  display: flex;
  box-sizing: border-box;
  min-width: 20%;
  max-width: 20%;
  max-height: 250px;
  padding: 5px;
  transition: transform 0.25s ease;
  /* 添加以下属性解决问题 */
  overflow: hidden;
}

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