search

sparkbox / bouncy-ball

:red_circle: Compare web animation techniques by bouncing a ball with each one.
https://sparkbox.github.io/bouncy-ball
MIT License
605 stars 66 forks source link

Bug in Safari for the CSS Step animation #60

Closed bryanbraun closed 5 years ago

bryanbraun commented 5 years ago

The CSS animation has a bug in Safari where it appears that the step distance is off somehow:

safari-animation-bug

This appears to only be happening in Safari. I wasn't able to reproduce the issue in Chrome, Firefox, or Edge.

tigt commented 5 years ago

Looks like it’s a different value provided in the prefixed keyframes:

@-webkit-keyframes bounce {
  from { background-position: 0px;     }
  to   { background-position: -2850px; }
}

Instead of the -3762px the unprefixed version has.

It should be safe to stop using the prefix, since CanIUse reports only 0.04% gain in browser support with them.

bryanbraun commented 5 years ago

Good idea, I'll get a fix in real quick.

bryanbraun commented 5 years ago

Ok... I'm pushing up a fix attributed to you, thanks for the help!