CODEWITHSUNDEEP
ioscss
Hitori
Hitori

Reputation: 589

CSS animation bug on Safari

I have a CSS animation bug on Safari where the wave animation I created does not behave as expected.

below is my animation keyframe:

@keyframes wave {
  20% {
    transform: translateY(-18px);
  }
  0%,
  40%,
  100% {
    transform: initial;
  }
}

I created a pen for it - https://codepen.io/ikhazen/pen/BXdqrN it behaves as expected in other browsers but not on Safari iPhone 6s.

To explain what was happening on my iPhone. The first three dots animate at once, followed by the 4th and 5th dots. it seems like the animation-delay property isn't working very well. and sometimes, I noticed that all dots animate at once. which is weird.

Thanks

Upvotes: 0

Views: 3780

Answers (3)

Hitori
Hitori

Reputation: 589

If anyone stumble upon this, try using a negative value in your animation-delay property.

here's the link https://codepen.io/ikhazen/pen/BXdqrN

&-6 {
  background: #c73e2c;
  animation-delay: -150ms;
  -webkit-animation-delay: -150ms;
}

&-5 {
  background: #ac3c3f;
  animation-delay: -300ms;
  -webkit-animation-delay: -300ms;
}

&-4 {
  background: #903a51;
  animation-delay: -450ms;
  -webkit-animation-delay: -450ms;
}

&-3 {
  background: #733866;
  animation-delay: -600ms;
  -webkit-animation-delay: -600ms;
}

&-2 {
  background: #573678;
  animation-delay: -750ms;
  -webkit-animation-delay: -750ms;
}

&-1 {
  background: #3c348a;
  animation-delay: -900ms;
  -webkit-animation-delay: -900ms;
}

Upvotes: 2

Mark Fisher
Mark Fisher

Reputation: 1267

I can see a similar problem on Safari on Mac OS, except the first dot goes on it's own, followed by the rest together. I have created a working pen here.

The problem is with the following css in your pen

@-webkit-keyframes wave {
  20% {
    transform: translateY(-18px);
  }
  0%,
  40%,
  100% {
    transform: initial;
  }
}

Changing it so that the percentages are in order fixes it:

@-webkit-keyframes wave {
  0% {
    transform initial;
  }
  20% {
    transform: translateY(-18px);
  }
  40% {
    transform: initial;
  }
  100% {
    transform: initial;
  }
}

If I am interpreting the specification correctly when it says

To determine the set of keyframes, all of the values in the selectors are sorted in increasing order by time

then this would seem to a bug in Safari, as the order in which you specifiy the keyframes should not matter.

Upvotes: 1

Krone
Krone

Reputation: 78

This part:

&-1 {
  background: #3c348a;
  animation-delay: 150ms;
}

is missing -webkit-animation-delay: 150ms;

Working code:

&-1 {
  background: #3c348a;
  animation-delay: 150ms;
  -webkit-animation-delay: 150ms;
}

Advice: use css autoprefixer to avoid such errors.

Upvotes: 0

Related Questions