In the code example, when I hover over the button, the "lorem ipsum" text wiggles up and down, only during the transition. Then it stays put. When I remove the cursor, it does the same thing. The movement is small but definitely there, maybe 1mm on my screen.
If I remove the transform: translate property from the parent .outer div, then the wiggling doesn't happen.
And even more bizarrely:
If I change the parent .outer div transform from 40% to 50%, the wiggle also seems to disappear.
Is this unwanted movement a bug? How can I prevent it?
I'm using Safari version 15.3. Thank you!
.outer {
background: orange;
transform: translate(0, 40%);
}
.lorem {
font-size: 28px;
}
button {
transition: all 0.25s;
}
button:hover {
transform: scale(1.4);
}
<div class="outer">
<div class="lorem">Lorem ipsum dolor sit amet.</div>
<button>Hover Over</button>
</div>