動畫在拉斐爾JS的圓弧擺動在Chrome

Question

我看到在我的動畫惱人的擺動，我已經去掉了其中包含實際的動畫代碼：

var side = 400; 
var paper = new Raphael($(this), 100, side); 

paper.customAttributes.arc = function (xloc, yloc, value, total, R) { 


       var alpha = 360/total * value, 
        a = (90 - alpha) * Math.PI/180, 
        x = xloc + R * Math.cos(a), 
        y = yloc - R * Math.sin(a), 
        path; 
       if (total == value) { 
        path = [ 
         ["M", xloc, yloc - R], 
         ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
        ]; 
       } else { 
        path = [ 
         ["M", xloc, yloc - R], 
         ["A", R, R, 0, +(alpha > 180), 1, x, y] 
        ]; 
       } 
       return { 
        path: path 
       }; 
      }; 

      var arcWidth = 180 - 120; 
      var strokeRadius = (120 + arcWidth/2); 

      var indicatorArc = paper.path().attr({ 
       "stroke": "#4B6384", 
       "stroke-width": 100, 
       arc: [side/2, side/2, 0, 100, strokeRadius] 
      }); 

      indicatorArc.animate({ 
       arc: [side/2, side/2, 75, 100, strokeRadius] 
      }, 1500, "<>", function(){ 
       // anim complete here 
      }); 

我已經把它放在一個的jsfiddle你親自體驗一下，請檢查firefox和chrome，你會發現在鉻的邊緣擺動很大，有什麼我可以做的，以消除這種情況？

小提琴這裏：run many times

Answer 1

所以我現在知道這是兩年多歲，但如果有人遇到這個問題，這是Chrome的2D內的已知的bug繪圖引擎。

https://code.google.com/p/skia/issues/detail?id=2769