圓形縮放動畫帶CSS轉換的Chrome bug

我在Chrome中遇到了一些簡單的動畫問題。我正在研究一個非常簡單的預加載器，它包含一個能夠及時增加其大小的圓圈。這是I'm如何創建這樣的：圓形縮放動畫帶CSS轉換的Chrome bug

#circle{ 
position:absolute; 
    display:block; 
     width:40px; 
    height:40px; 
     background:#000; 
    top:50%; 
    left:50%; 
    margin:-20px 0 0 -20px; 

    -webkit-border-radius:50%; 
    -khtml-border-radius:50%; 
     -moz-border-radius:50%; 
      border-radius:50%; 

    -webkit-transform:scale(0.3); 
     -moz-transform:scale(0.3); 
     -ms-transform:scale(0.3); 

    -webkit-animation:loading 1.5s ease-out forwards infinite; 
     -moz-animation:loading 1.5s ease-out forwards infinite; 
     -ms-animation:loading 1.5s ease-out forwards infinite; 
}

而這個動畫：

@-webkit-keyframes loading { 
    0%{-webkit-transform:scale(0.3);} 
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}  
}

這裏是結果，其中僅微升Chrome上的板缺掉。使用webkit的Safari也完美地呈現了這一點。（注意頂部和左側切）

enter image description here

而在去年的一些相關問題。你將如何規劃IE的圖形回退？我的意思是，我可以問modernizr並創建一個刪除它並通過JS添加圖形的後備。但是我想知道只使用CSS的更好方法。

該動畫不適用於IE瀏覽器，因此這個想法將刪除黑色圓圈並在其位置添加一個動畫預加載器gif。

希望你能幫上忙，因爲它讓我瘋狂！

非常感謝！

來源

2013-03-07 BeatLaG

我有相同的問題（但對我來說發生在底部和右側）。任何解決方案 – Andrei 2014-08-05 12:49:00

它看起來像是被它的容器隱藏起來。

試試這個：

#circle { 
    margin:-19px 0 0 -19px; 
}

來源

2013-03-07 17:23:46 Andy

容器是100％/ 100％的圖層。只有這個元素被設置在視口的中間。所以它是由任何包裝裁剪。在Opera，Safari和FF上，它正在按照應有的方式工作。只有Chrome Win/Mac正在以這種方式工作。不管怎麼說，還是要謝謝你！ – BeatLaG 2013-03-07 17:30:28

圓形縮放動畫帶CSS轉換的Chrome bug

回答

相關問題