Seltsame Transformationen beim Scrollen mit hängender Perspektive und Position in Firefox ⇐ CSS

[Guest]

Warum wird #object gedreht, wenn im Sticky-Modus gescrollt wird? Wenn das das beabsichtigte Verhalten ist, warum kommt es dann zu einem Flashback? Die Blitze sind nicht einmal konsistent. Es blinkt sofort wieder auf, wenn ich die Bildlaufleiste gedrückt halte, ziehe und loslasse. aber wenn das Mausrad verwendet wird, fühlt es sich nicht wie ein Blinken an, sondern manchmal, wenn man klickt oder interagiert. Scheint mir ein Bug zu sein. Passiert nicht auf Chrome.

Code: Select all

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

}

Code: Select all

solid


hjkl
hjkl
hjkl
hjkl
hjkl
hjkl

hjkl
hjkl
hjkl
hjkl
hjkl
hjkl

[img]https:// i.sstatic.net/V0zlK3qt.gif[/img]