サファリのSVGアニメーションのバグ11

Question

昨夜リリースされたサファリがあります：Safari 11. そしてこの最後のバージョンでは、サファリ10で正常に動作していたSVGアニメーションのバグが作成されますが、クロムの場合は

そして私はちょうど私はすべて、-webkit- subfix、コンテナ、起源などを試してみましたが、この問題を解決する方法を見つけることはありません...

誰かがアイデアを持っていることはできますか？あなたはtranslate()変換のためのパーセント値を使用している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

：ここ

はサファリの最後のバージョンになるまで働いていたバージョンです。それは問題を提起する：何の割合？

Google ChromeとSafari 10は"the bounding box of the transformed element"で質問に答えています。 CSS変換定義の2013「作業中のドラフト」からです

FirefoxとSafari 11の回答は"the size of the local viewport"です。 （あなたの場合、<svg>要素のサイズ）。これは最新のCSS Transforms定義の「Editor's Draft」バージョンからのものです。

transform-box:fill-boxを設定して以前の動作を復元することができます。

よりよい解決策は、相対値ではなくピクセル値を使用することです。あなたのアニメーション要素はすべて幅と高さが25pxの範囲にあるため、現在の値を4で割ってをpxに交換すると、これらの値を微調整するための適切なスタートが得られます。