Animation CSS et animationiteration event

Bonjour !

A force de m'arracher les cheveux, la calvitie arrivant, j'en fais appel à vous.

J'ai une animation toute simple en CSS permettant un effet "flip" sur des tuiles, à la windows 8. Accompagnée d'un petit contrôle JS permettant un random sur la rotation.

La structure HTML (il y a plus de tuiles mais c'est pour donner une idée) :

<div class="flipContainer active">
      <div class="flipContent bloc_1">
        <div class="flip-item"></div>
        <div class="flip-item"></div>
      </div>
    </div>
    <div class="flipContainer active">
      <div class="flipContent bloc_2">
        <div class="flip-item"></div>
        <div class="flip-item"></div>
      </div>
    </div>

Le CSS (code fonctionnement uniquement sur Chrome pour le moment) :

.flipContainer{width:32%;height:44%;float:left;margin-bottom:1%;perspective:500px;position:relative;}
.flipContainer .flipContent{
    width:100%;height:100%;
    transform-style: preserve-3d;
}
.flipContainer.active .flipContent{
    animation:anim_flip 0.5s ease infinite alternate;
    -webkit-animation:anim_flip 0.5s ease infinite alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes anim_flip{
    from { transform:rotateX(0deg); -webkit-transform:rotateX(0deg); }
    to{ transform:rotateX(180deg);-webkit-transform:rotateX(180deg);}
}
@keyframes anim_flip{
    from { transform:rotateX(0deg); -webkit-transform:rotateX(0deg); }
    to{ transform:rotateX(180deg);-webkit-transform:rotateX(180deg);}
}

.flipContainer .flipContent div.flip-item{background:red;position:absolute;width:100%;height:100%;backface-visibility: hidden;-webkit-backface-visibility: hidden;}
.tpl_test3 .flipContainer .flipContent div.flip-item:last-child{background:green;transform: rotateX(180deg);}

Et enfin, le petit bout de JS

$('.flipContainer.active .flipContent').on('webkitAnimationIteration oanimationiteration msAnimationiteration animationiteration',
            function(e) {
                var scope = this;
                $(scope).css('animation-play-state', 'paused');
                setTimeout(function(){
                    $(scope).css('animation-play-state', 'running');
                }, Math.random()*10000);
            }
        );

Le principe est donc simple, une tuile se retourne sur elle même faisant apparaître le verso, puis au bout d'un certain temps (Math.random()*10000) retourne sur son côté recto, et ainsi de suite.
Sur des résolutions assez petites, l'animation fonctionne correctement.
Mais dès que je suis sur une résolution plus importante (l'écran devant être affiché en 1920*1080), l'animation ne va pas jusqu'au bout avant que l’événement de pause se déclenche, et la tuile se retrouve donc "de travers".
Il est d'ailleurs à noter que dans cet exemple, cette anomalie n'arrive que lorsque c'est le côté rouge qui s'affiche, aucun problème avec le côté vert.

Si vous avez ne serait ce que des pistes pour m'aider, je vous en serai gré de me les faire partager...

Merci d'avance !
Toma

Pour une raison qui m'est pour le moment inconnu, la face verte ne s'affiche pas sur ce fiddle (j'ai donc retiré une partie du css) mais ça vous donnera une idée peut être plus précise du problème...