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>

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>

• css
• firefox
• perspective

• 2 Your snippet doesn't appear to exhibit a bug for me as easily as your gif shows, but if I click first in the scroll bar where the thumb isn't, then it does, so I suspect that the scroll amount is getting miscalculated, then corrected. You should file a bug report. I don't think you can fix this with code. – Nanigashi Commented Jan 20 at 20:38
• @Nanigashi I did filed a bug with a backlink to here – Vagif VALIYEV Commented Jan 21 at 19:43
• @Nanigashi hey see my answer, I know it doesn't solve the problem, but it's a very easy workaround to be able to use sticky+perspective. since it was behaving different for you, I wonder if this approach fixes it for you too? – Vagif VALIYEV Commented Jan 22 at 21:46

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