Safari bug with transition and translateY: "jumping" element

Question

I'm moving an element with translateY. Everything works fine under Chrome, Firefox, IE, old Edge except Safari (versions 12, 13, 14..., 18) and GNOME Web (WebKit).

Under Safari the element "jumps". Here a small example (also available on CodePen):

.parent {
  height: 50px;
  background-color: blue;
  padding: 10px;
}

.child {
  background-color: yellow;
  padding: 10px;

  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.child.move {
  transform: translateY(-150%);
  padding: 0; /* If 10px: no bug */
}

<br><br><br>
<div class="parent">
  <div class="child" onclick="this.classList.toggle('move')">Click me</div>
</div>

I could not find answers on the WebKit bug tracker.

Do you know some workarounds?

Other Stack Overflow related issues:

• css transform + width + left + top transition jump on safari browser
• Transition both transform and size in Safari (9.1)
• Animating margins and padding with CSS Transition causes jumpy animation

Answer 1

You can add: transition-delay: 1ms; which would force the padding property before the transform transition.

https://codepen.io/konstantin/pen/qBWJjjq