Firefox中perspective+position sticky滚动时的异常变换问题

问题描述 #

设置了position: sticky的#space元素，在滚动时内部的#object会发生旋转？如果这是预期行为，为何会出现闪烁回退的情况？该闪烁表现不一致：

• 拖动滚动条并松开时会立即回闪
• 使用鼠标滚轮时多数情况无闪烁，但点击或交互时偶尔会出现
  此现象仅在Firefox中出现，Chrome浏览器无此问题。

代码示例 #

CSS #

#container {
  overflow: scroll;
  height: 200px;
}

#space {
  position: sticky;
  top: 0;
  perspective: 300px;
}

#object {
  transform: rotateX(45deg)
}

#content {
  height: 400%;
}

/* 视觉样式 */
#container {
  background-color: #222;
  display: flex;
  flex-direction: row-reverse;
  padding: 30px;
}

#object {
  background-color: #888;
  text-align: center;
  border-radius: 16px;
  width: 140px;
  height: 140px;
}

#content {
  color: #eee;
  padding: 30px;
}

HTML #

<div id="container">
  <div id="space">
    <div id="object">solid</div>
  </div>

  <div id="content">
    hjkl<br>hjkl<br>hjkl<br>hjkl<br>hjkl<br>hjkl<br>
    hjkl<br>hjkl<br>hjkl<br>hjkl<br>hjkl<br>hjkl<br>
  </div>
</div>

演示效果 #

问题分析与解决 #

1. 旋转现象的原因 #

这并非预期行为，而是Firefox对sticky元素与perspective/3D变换组合的渲染处理bug。

当#space设为sticky后，Firefox在其切换"固定/非固定"状态时，会错误地重置或重新计算父元素perspective对内部变换元素的影响，导致视觉上出现旋转"跳变"。Chrome对此场景的渲染逻辑更稳定，没有这个问题。

2. 闪烁回退的触发条件差异 #

闪烁的不一致性是因为不同滚动操作触发的浏览器渲染路径不同：

• 拖动滚动条松开时，浏览器会触发完整的重排重绘，此时sticky元素的状态切换被明确处理，bug更容易显现；
• 鼠标滚轮滚动时，Firefox可能使用了更高效的滚动合成（GPU加速），跳过了部分重排步骤，所以多数情况下看不到闪烁；
• 点击/交互时的偶现闪烁，是因为交互操作可能打断了合成流程，触发了额外的重绘。

3. 修复方案 #

可以通过以下方式规避这个Firefox的渲染bug：

• 将perspective属性从sticky元素#space移到非sticky的父元素（比如#container）上；
• 给#space添加transform: translateZ(0)，强制GPU加速，稳定其渲染状态；
• 避免在sticky元素上直接使用perspective，改用transform-style: preserve-3d结合子元素的3D变换。

示例修改后的CSS：

#container {
  overflow: scroll;
  height: 200px;
  perspective: 300px; /* 把perspective移到容器上 */
}

#space {
  position: sticky;
  top: 0;
  /* 移除原perspective */
}

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