Safari bug of a CSS animation with keyframes

Asked

Viewed 89 times

1

In safari Version 12.1 (14607.1.40.1.4), a bug occurs, the effect happens, but gives a strange error, the element that suffered the event seems to recede, the initial position of the translate3d, different from Chrome, which actually holds the element in the new position of the new position of the translate3d.

 ul.tools.finish-animation {
        display: block;
        animation: downBumble 700ms;
        -moz-animation: downBumble 700ms; /* Firefox */
        -webkit-animation: downBumble 700ms; /* Safari and Chrome */
        -o-animation: downBumble 700ms; /* Opera */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        will-change: transform;

      }


@keyframes downBumble {
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}
@-moz-keyframes downBumble { /* Firefox */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}
@-webkit-keyframes downBumble { /* Safari and Chrome */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }


}
@-o-keyframes downBumble { /* Opera */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}

Example fiddle

css css3 scss

  • I don’t know if it’ll do it, but put a final value on the animation at 100%, like 100% {
 -webkit-transform: translate3d(0px, 0px, 0px);
 } and if you want the animation just repeat 1x put the -webkit-animation-fill-mode: forwards; may help also. Test there and tell me, here I do not have an environment with Safari to be able to test ... Another option too is to test changing translate3d for translateY(30px) etc iqe vc only moves the element on the Y axis it is already enough

  • Placed, even so, it did not happen... :(

  • Since I can’t debug in safari, I don’t think I can help much... but I will "redo" this animation with a cleaner CSS and pass you to test.

  • 1

    Ivan tests there to see if the bug continues. Another thing, according to Caniuse you don’t even have to write the vendor prefix -webkit- for transform or animation, then follow the simplified version. I cleaned up the CSS and the animation was very similar https://codepen.io/hugocsl/pen/bXwbaJ

  • 1

    Solved it here, thanks!

  • Did Ivan solve with the tip or solved otherwise? If it was with the code I can post as response?

  • Yes, you cleaned the code as in your codepen example and it worked, thanks! I think the problem is that I was having this 700ms at the beginning of class, which I didn’t need.

  • Something I took was bugging rss, that 700ms was the running time, I don’t know if it was related to it. But with this simpler model that I did, it is even better for you to maintain the code, besides having solved the problem :). It was worth the force

Show 3 more comments

1 answer

2


As discussed in the comments of the question follows the answer.

Safari 12, as can be found on Caniuse, no longer needs prefixes -webkit- in animations, keyframes or Transition. Another bridge is that as the animation is only in the axis Y, do not need to use the translate3d nor preserve-3d among other things that were in CSS and more weighed in animation than they helped in something.

Starting from these observations, I gave this "clean" in the CSS and adjusted the timings of the animation and seems to work in Safari smoothly.

ul.tools li {
  float: left;
  padding: 6px;
  list-style:none;
  font-family: sans-serif;

  animation: anima 350ms linear forwards;
}

@keyframes anima {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-30px);
  }
  50%{
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
<ul class="tools finish-animation">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
  <li><a href="#">link 2</a></li>         
</ul>

Browser other questions tagged css css3 scss

You are not signed in. Login or sign up in order to post.