Visual errors on Safari@IOS

[avanc]

Some reels are blank at the almost end of the animation. If the animation is finished, the reels are again shown properly:

Two right reels are missing. It depends on the time within the animation.

[avanc]

Similar behaviour on Chrome on Android. However, Firefox works flawless...

[johakr]

This commit https://github.com/johakr/html5-slot-machine/commit/8e5cd3917738781dcdba181f8789a2741be54d2f makes it somewhat better. At least no blanks anymore. But animation is still far from being smooth on Safari. I'm out of ideas for now. Any help welcome.

[dsc1025]

Thank you so much for your program helped me, but in the animation, "transform" consumes too much, you can use "top", can handle iPhone compatibility issues, I did this,

[SystemR]

Three things I've found with Safari bug:

1. On the animation.onfinish function you need to call animation.cancel() to reset the animation state. Otherwise Safari will keep the done state and not rerun the translate3d.
2. Safari doesn't seem to like filter: blur() in the animation keyframes. Removing this filter: "blur(2px)" line (and the next filter: "blur(0px)") makes the spin animation work: https://github.com/johakr/html5-slot-machine/blob/b202c309f6b6f8975bd03c72f73d7e92dda79343/src/js/Reel.js#L15
3. However, adding reelContainer.style.filter = 'blur(2px)'; at start and setting reelContainer.style.filter = 'blur(0)'; inside the animation.onfinish makes the blur works. Just not keyframed.

Try this spin function:

spin() {
  this.reelContainer.style.filter = 'blur(2px)';
  const animationPromise = new Promise((resolve) => {
    this.animation.onfinish = () => {
      this.reelContainer.style.filter = 'blur(0)';
      this.animation.cancel();
      resolve();
    };
  });

  ...

Also add transition: filter 0.05s ease-in-out; in the css to make the filter changes smooth.

[johakr]

Hey @SystemR,

thanks for sharing your findings, this is great! 🤩 I wasn't really happy with the impact on the blur transition, though, but it made me try out some further stuff. And I found out that the issue is with the combination of translateY & blur. So I changed to animating top & blur instead, which seems to fix the issues on safari. This and your suggested animation.cancel(). 👍

Therefore, closing the issue as fixed by https://github.com/johakr/html5-slot-machine/commit/b21aba88f4a6cbedce6c1532adbb808d324a4298.