在 Firefox 上使用透视+位置粘性滚动时出现奇怪的变换

Question

为什么

#object

在粘性滚动时会旋转？如果这是预期的行为，那么为什么它会闪回？闪光甚至不一致。当我按住滚动条，拖动并释放时，它立即闪回来。但使用鼠标滚轮时感觉不闪烁，但有时点击或交互时会有闪烁的感觉。对我来说似乎是一个错误。 chrome 上不会发生这种情况。

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

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

#object {
  transform: rotateX(45deg)
}

#content {
  height: 400%;
}



/* 
    visual styles 
*/



#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;

}

<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>

Answer 1

我发现了一个非常奇怪的解决方法。当我将

overflow: scroll

和

perspective

应用于同一元素时，该元素的粘性子元素内部的转换可以正常工作

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

#space {
  position: sticky;
  top: 0;
}

#object {
  transform: rotateX(45deg)
}

#content {
  height: 400%;
}



/* 
    visual styles 
*/



#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;

}

<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>