Webkit的動畫打破SVG下方

Question

我在jsfiddle

做出了表率頁。如果我讓#dog元素的sway動畫和滾動我看到了SVG大規模綁紮頁面。

如果我把動畫關（刪除-webkit-animation-name位）的條紋的消失和SVG看起來應該（平滑）

有誰知道是什麼原因導致這個問題？任何方式來解決它？

我只在Webkit的瀏覽器（Chrome瀏覽器，金絲雀，無論在OSX）試圖

Answer 1

我發現了一個很哈克解決這個問題。

基本上你需要反覆改變寬度從原來的原始減去1個像素，然後再回來。

if($("#svgtest").css('width')=='15500px') { 
    $("#svgtest").css('width','14499px'); 
} else { 
    $("#svgtest").css('width','15500px'); 
} 

你可以在this fiddle看到它的行動。

雖然這是一個黑客，但不是一個真正的修復，但它確實解決了我遇到的SVG綁定問題。

也許有人可以想出一個稍微不太好解決問題的辦法？

Answer 2

看來，動畫觸發其不良呈現梯度的GPU，該漏洞可以通過簡單地#test應用translate3d(0,0,0)轉載。 http://jsfiddle.net/LKmbN/

Barring turning off GPU acceleration唯一的解決方法是我能想到的是通過JavaScript進行動畫製作。希望有人能想出一些不那麼痛苦的事情。