Definir atraso de animação CSS3 explicitamente para Safari (celular)

Acabei de entrar na situação em que a propriedade de animação definida no W3C não funcionava para mim no Safari para celular. O código a seguir deve fazer um efeito de esmaecimento entre três imagens. É um trecho de nossa base de código escrito em SCSS com a ajuda do Compass.

.some-container {
    $animation_duration: 21s;
    $animation_average: $animation_duration / 3;

    &:nth-child(1) {
      @include animation(crossfade_animation $animation_duration 0s infinite);
    }
    &:nth-child(2) {
      @include animation(crossfade_animation $animation_duration $animation_average infinite);
    }
    &:nth-child(3) {
      @include animation(crossfade_animation $animation_duration $animation_average * 2 infinite);
    }
}

@include keyframes(crossfade_animation) {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  33.3333% {
    opacity: 1;
  }
  35.3333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

No Safari mobile, a duração total da animação era usada como atraso que levava a telas em branco durante a animação. Tive que definir o atraso explicitamente para fazê-lo funcionar. Obviamente, a ordem das segundas unidades não é interpretada corretamente.

Isso funciona perfeitamente:

.some-container {
    $animation_duration: 21s;
    $animation_average: $animation_duration / 3;

    &:nth-child(1) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay(0s);
    }
    &:nth-child(2) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay($animation_average);
    }
    &:nth-child(3) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay($animation_average * 2);
    }
}