Safari: Hover scale effect on a button makes neighboring element wiggle during the transition?

Viewed 31

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>

0 Answers
Related