Here is a technique that solves a common kind of animation jitteriness in iOS Mail. Under certain conditions, quick, single iteration (non-repeating) CSS animations in iOS tend to skip – causing movements to look glitchy and jarring.

I’m not exactly sure why it occurs, and it only occurs occasionally, so its hard to pin down. I’m speculating that this occurs when the operating system is under high CPU or memory load (ie. too many background apps running).

Example

The following is an example where an element moves from the top to the bottom of a container within one second.

.text{
  animation: slide 1s linear forwards;
}
@keyframes slide{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(350px); }
}

(This example repeats for illustration purposes)

Glitch

However, occasionally in iOS Mail, the animation will execute with a glitch where it runs for a bit and jumps right to the end:

(This example repeats for illustration purposes)

A Hacky Workaround

It appears the workaround is to double the duration of the animation, but make the animation complete at the 50% mark. This seems to have tricked iOS into actually running the full animation smoothly.

In the example above the modified code will look the like following code, where the animation duration is set to 2s but the translate transform completes at the 50% mark. Then from 50% to 100% the animation does nothing.

.text{
  animation: slide 2s linear forwards;
}
@keyframes slide{
  0%{ transform:translateY(0); }
  50%,100%{ transform:translateY(350px); }
}

I’ve found that you’ll need to increase the duration by more than double if the animation runs for less than a second. For example for a 0.5s animation, you might have to set the new duration to 2s (4x) and have it complete at the 25% mark.

Diagostic Test

The following is a diagnostic test. Both left and right text should take the same amount of time (1 second) to “drop”. However the left one is configured to run all the way to 100%. The right has double the duration (2 seconds) but completes at the 50% mark. Under normal conditions both should run parallel to each other. However when iOS glitches, the left image will jump to the bottom unexpectedly. Feel free to send a test to see the effects for yourself.

The best way to see the glitch is to try to launch a few apps (ie. Google Maps, Youtube, a few tabs on Safari) on your device before opening the email.

See the Pen CSS Animation Jitter Test for iOS Mail by FreshInbox (@freshinbox) on CodePen.

Not All Animations Are Affected

I’ve noticed that this does not affect all animations and mostly affect those that involve translate transforms. Also if the animation repeats (ie. animation-iteration-count:infinite), then this issue doesn’t occur.

Feedback

Let me know what you think and whether this has helped you fix some of the glitches you’ve seen. If you have found other workarounds, let me know too!