I noticed a strange anomaly in CSS. In short, when I hover over a rotated div, the contents inside the div seem to shift down by about 1 pixel. This only seems to occur at specific view heights.
Take a look at this gif demonstrating the issue (pay attention to how the text "One" shifts about one pixel):
https://i.sstatic.net/jeA6p.gif
Here is the most minimal example I could create:
.header {
background-color: orange;
height: 30vh;
}
.container {
display: grid;
height: 100px;
width: 100px;
border: 1px solid red;
}
.front {
grid-area: 1/1;
background-color: blue;
}
.back {
grid-area: 1/1;
background-color: red;
transform: rotateY(180deg);
}
.back,
.front {
backface-visibility: hidden;
transition: transform 1s;
margin: 1rem;
}
.container:hover .back {
transform: rotateY(0deg);
}
.container:hover .front {
transform: rotateY(180deg);
}<div class="header"> HEADER </div>
<div class="container">
<div class="front">
<h2>One</h2>
</div>
<div class="back">Two</div>
</div>You can also find the same code on Codepen if resizing it here is difficult: Codepen showing issue
The issue doesn't manifest at all screen heights, so open DevTools and gradually decrease the screen height, testing the hover at each interval. The shifting occurs during rotation at certain heights, negatively impacting any card flip animations.