Why do elements nudge down upon rotation, in grid container - html

Question

I stumbled across an oddity in CSS. Briefly told, when rotating a div upon hover, the contents within the div nudges down what looks like 1 pixel or so. It only happens at certain view heights.
Here is a gif that shows the issue (notice how the text "One" nudges about one pixel):
Here is the smallest reproduction I was able to make:
.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>
A Codepen with the same code, in case the above is hard to resize: Codepen showing issue
The problem does not occur on all screen heights, so activate DevTools then shrink the height of the screen gradually, trying a hover at each height. It will nudge upon rotation at certain heights. The nudge causes any card flip animation to look bad.

Answer 1

It indeed only happens on small browser height.
It works without jumping if you change vh to px in .header.
In you case, I would add #media query for screens with small height and vh for bigger screens.
#media screen and (max-height: 160px) {
.header {
height: 50px;
}
}