bug d'animation SVG dans safari 11

Question

Comme vous le savez, il ya un nouveau Safari publié hier soir: Safari 11. Et cette dernière version créer un bug sur l'animation SVG qui fonctionnait bien sur Safari 10 ou encore travailler sur chrome:

Et je trouve tout simplement pas ne comment résoudre ce problème, j'ai tout essayé, -webkit- subfix, conteneur, origine etc ...

quelqu'un peut-il avoir une idée?

Voici la version qui fonctionnait jusqu'à ce que la dernière version de Safari: https://jsfiddle.net/3f02je66/

.home_st0 {fill:#FFFFFF;} 
.home_st1 {fill:#6CC3BD;} 
.home_st2 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200;} 
.home_st3 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:20;stroke-dashoffset:20;} 
.home_st4 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50;} 

#casserole {stroke-dasharray:200; stroke-dashoffset:200;} 
#casserolePL {stroke-dasharray:20; stroke-dashoffset:20; } 
#casserolePR {stroke-dasharray:20; stroke-dashoffset:20; } 
#casseroleL {stroke-dasharray:50; stroke-dashoffset:50;} 
#casserole {animation: casserole .8s ease-in-out forwards .8s;} 
    @keyframes casserole { 
     from{stroke-dashoffset:200; } 
     to {stroke-dashoffset:0;} 
    } 
#casserolePL {animation: casserolePL .5s ease-in-out forwards 1s;} 
    @keyframes casserolePL { 
     from{stroke-dashoffset:20; } 
     to {stroke-dashoffset:40;} 
    } 
#casserolePR {animation: casserolePR .5s ease-in-out forwards 1.1s;} 
    @keyframes casserolePR { 
     from{stroke-dashoffset:20; } 
     to {stroke-dashoffset:0;} 
    } 
#casseroleL {animation: casseroleL .5s ease-in-out forwards 1.2s;} 
    @keyframes casseroleL { 
     from{stroke-dashoffset:50; } 
     to {stroke-dashoffset:100;} 
    } 

#aubergine {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;} 
#aubergine {animation: aubergine 10s linear infinite 1.5s;} 
    @keyframes aubergine { 
     0%{transform: translate(45%, 0%) rotate(0deg);} 
     20%,100% {transform: translate(45%, 400%) rotate(200deg);} 
    } 
#poisson {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;} 
#poisson {animation: poisson 10s linear infinite 1.5s;} 
    @keyframes poisson { 
     9%{transform: translate(45%, 0%) rotate(0deg);} 
     29%,100% {transform: translate(40%, 400%) rotate(-240deg);} 
    } 
#carotte {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;} 
#carotte {animation: carotte 10s linear infinite 1.5s;} 
    @keyframes carotte { 
     18%{transform: translate(45%, 0%) rotate(0deg);} 
     38%,100% {transform: translate(0%, 400%) rotate(-100deg);} 
    } 
#pois {transform: translate(-20%, 0%) rotate(0deg); transform-origin:center center;} 
#pois {animation: pois 10s linear infinite 1.5s;} 
    @keyframes pois { 
     27%{transform: translate(45%, 0%) rotate(0deg);} 
     47%,100% {transform: translate(0%, 420%) rotate(160deg);} 
    } 
#poulet {transform: translate(-20%, 0%) rotate(0deg); transform-origin:center center;} 
#poulet {animation: poulet 10s linear infinite 1.5s;} 
    @keyframes poulet { 
     36%{transform: translate(-20%, 0%) rotate(0deg);} 
     56%,100% {transform: translate(-20%, 400%) rotate(300deg);} 
    } 
#feuille {transform: translate(-50%, 0%) rotate(0deg); transform-origin:center center;} 
#feuille {animation: feuille 10s linear infinite 1.5s;} 
    @keyframes feuille { 
     45%{transform: translate(-40%, 0%) rotate(0deg);} 
     65%,100% {transform: translate(15%, 400%) rotate(60deg);} 
    } 
#navet {transform: translate(15%, 0%) rotate(0deg); transform-origin:center center;} 
#navet {animation: navet 10s linear infinite 1.5s;} 
    @keyframes navet { 
     54%{transform: translate(20%, 0%) rotate(0deg);} 
     74%,100% {transform: translate(-35%, 460%) rotate(360deg);} 
    } 
#crevette {transform: translate(-15%, 0%) rotate(0deg); transform-origin:center center;} 
#crevette {animation: crevette 10s linear infinite 1.5s;} 
    @keyframes crevette { 
     63%{transform: translate(-15%, 0%) rotate(0deg);} 
     83%,100% {transform: translate(15%, 400%) rotate(-160deg);} 
    } 
#oignon {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;} 
#oignon {animation: oignon 10s linear infinite 1.5s;} 
    @keyframes oignon { 
     72%{transform: translate(45%, 0%) rotate(0deg);} 
     92%,100% {transform: translate(40%, 500%) rotate(-240deg);} 
    } 
#poivron {transform: translate(10%, 0%) rotate(0deg); transform-origin:center center;} 
#poivron {animation: poivron 10s linear infinite 1.5s;} 
    @keyframes poivron { 
     81%{transform: translate(10%, 0%) rotate(0deg);} 
     99%,100% {transform: translate(20%, 440%) rotate(140deg);} 
    } 

Answer 1

Vous utilisez des valeurs de pourcentage pour translate() transformations. Cela soulève la question: pourcentage de quoi? Google Chrome et Safari 10 répondent à la question par "the bounding box of the transformed element". C'est à partir du 2013 «Working Draft» de la définition CSS Transforms

Firefox et Safari 11 répondent avec "the size of the local viewport". (dans votre cas, la taille de l'élément <svg>). C'est à partir de la dernière version "Editeur" de la définition CSS Transforms.

Vous pouvez essayer de restaurer le comportement précédent en définissant transform-box:fill-box.

La meilleure solution est de ne pas utiliser de valeurs relatives mais de pixels. Puisque vos éléments animés sont tous dans la plage de 25px largeur et hauteur, diviser la valeur actuelle par 4 et échanger % pour px devrait vous donner un bon départ pour affiner ces valeurs.