Safari瀏覽器中的SVG動畫錯誤11

正如你可能知道有一個新的Safari昨晚發佈：Safari 11. 而這最後一個版本創建了一個在Safari 10上工作正常或仍然在Chrome上工作的SVG動畫的錯誤：Safari瀏覽器中的SVG動畫錯誤11

而我只是沒有找到如何解決這個問題，我什麼都試過，-webkit- subfix，集裝箱，產地等..

有人能有一個想法？

這裏是會一直幹到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);} 
    }

來源

2017-09-20 Alex

能否請你說明什麼不工作了嗎？這裏列出了14個動畫。 – ccprog

正如你在jsfiddle上看到的，食材落入鍋內。但在Safari瀏覽器上，各個組成部分無處不在 – Alex

所以你認爲這是一個webkit的bug？ – Alex

您正在使用的百分比值translate()轉換。這提出了一個問題：什麼比例？

谷歌Chrome和Safari 10回答與"the bounding box of the transformed element"問題。這是從CSS的2013「工作草稿」來變換定義

Firefox和Safari 11回答與"the size of the local viewport"。（在你的情況下，<svg>元素的大小）。這是來自CSS變換定義的最新「編輯草案」版本。

您可以嘗試通過設置transform-box:fill-box恢復到以前的行爲。

更好的解決方案是不使用相對的，但像素值。由於您的動畫元素都在25px的寬度和高度的範圍內，除以4的電流值和px交換%應該給你一個不錯的開始微調這些值。

來源

2017-09-20 18:55:38 ccprog

您正在尋找的報價在這裏：https://drafts.csswg.org/css-transforms/#transform-box ie對於沒有關聯CSS佈局框的SVG元素，邊框使用的值是視圖框。另一種解決這個問題的方法是通過transform-box：fill-box; –

謝謝，我知道你會提供一個源代碼。 – ccprog

好吧，我現在明白了，變形盒：填充盒是問題所在。感謝您的幫助 – Alex

Safari瀏覽器中的SVG動畫錯誤11

回答

相關問題