4

I'm moving an element with translateY. Everything works fine under Chrome, Firefox, IE, old Edge except Safari (12.1.2 & 13.1.2) 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:

tanguy_k
  • 11,307
  • 6
  • 54
  • 58
  • Maybe use some other property like top / bottom for transition and moving the target element as suggested by https://stackoverflow.com/a/29330961/4997994. – oomer Oct 06 '22 at 18:04

1 Answers1

6

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

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

Konstantin
  • 186
  • 9
  • That works great with `transition: transform ...` but not with `transition: all ...` :-/ – tanguy_k Sep 25 '19 at 20:56
  • This is a great solution. Had the same issue with the logo animation here http://budapesturbanwalks.com (when viewport was below 991px and landscape and scroll position was not on top of the site). This solved it! It uses `transition: all`, but it works like charm. – Bence Szalai Sep 02 '20 at 23:04