weird transformations when scrolled with perspective+position sticky on firefox

Question

why does #object gets rotated when scrolled in sticky? if that's the intended behavior, then why does it flash back? the flashes aren't even consistent. it flashes back immediately when I hold the scrollbar, drag and release. but when mouse wheel is used, it doesn't feel like flashing, but sometimes do when you click or interact. seems like a bug to me. doesn't happen on 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

I've found a very strange workaround. when I apply overflow: scroll and perspective to the same element, the transformations for the sticky element works properly. but now it's not exactly just X rotated :/

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

#object {
  position: sticky;
  top: 0;
  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="object">solid</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>