사파리의 SVG 애니메이션 버그 11

Question

지난 밤에 사파리 11이 출시되었습니다. 이 마지막 버전은 사파리 10에서 정상적으로 작동하거나 여전히 Chrome에서 작동하는 SVG 애니메이션에 버그를 만듭니다.

그리고 난 그냥이 문제를 해결하는 방법을 찾을 수없는, 내가 다, -webkit- subfix, 용기 등의 기원을 시도 ...

누군가가 아이디어를 가질 수 있습니까? 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

당신은 translate() 변환에 대한 백분율 값을 사용하고 있습니다 : 여기

사파리의 마지막 버전까지 작업 된 버전입니다. 그것은 질문을 제기합니다 : 무엇의 비율?

Google 크롬과 Safari 10은 "the bounding box of the transformed element"으로 질문에 대답합니다. 그것은 CSS 변환 정의의 2013 "작업 초안"에서입니다.

"the size of the local viewport"으로 Firefox 및 Safari 11 답변. (귀하의 경우 <svg> 요소의 크기). 그것은 CSS Transforms 정의의 최신 "Editor 's Draft"버전의 것입니다.

transform-box:fill-box을 설정하여 이전 동작을 복원 할 수 있습니다.

더 나은 솔루션은 상대적이지만 픽셀 값을 사용하지 않는 것입니다. 애니메이션 요소가 모두 너비와 높이가 25px의 범위에 있으므로 현재 값을 4로 나누고 을 %으로 바꿔야이 값을 미세 조정할 수 있습니다.