javascript - jQuery's position().left changing when Raphael JS's setViewBox changes in FireFox -

I have included a jsfiddle to show a problem with jQuery and Raphael in Firefox. If you move, the circle becomes bigger in the Rafael canvas. Below the slider, I print the left position of the canvas. In Chrome and Internet Explorer, the slider is left stationary due to being moved. However in Firefox, the left shift as the slider has moved back and backward.

  & lt; Div id = "test" & gt; & Lt; / Div & gt; & Lt; Div id = "slider" & gt; & Lt; / Div & gt; & Lt; Div id = "left1" & gt; Left: & lt; Span id = "left2" & gt; & Lt; / Span & gt; & Lt; / Div & gt; Var x = 1; R = Rafael ('test', 100, 100); R.canvas.className.baseVal = "canvas"; R.circle (40,40,10); $ ('# Slider'). Slider ({slide: function (E, ui) {x = ui.value; r.setViewBox ((r.canvas.get attribute ('width') / 2) - ((r.canvas .get attribute ('width' ) * 5) / x), (r.canvas.get attribute ('height') / 2) - ((r.canvas.get attribute ('height') * .5) / x) R.canvas.getAttribute ( 'Width') / x, r.canvas.getAttribute ('height') / x $ $ ('# left2'). Text ($ (r.canvas) .position (). Left);}}};   
 jsFiddle:  
 Any thoughts why discarded changes in Firefox?   
 
 
 I have been informed that there is a problem with SVG elements in jQuery, as shown by this bug Has been:  
  
 The solution to solve my problem is to use it in the bounding box of SVG element instead of JQuery position. Therefore, I have replaced every  
 $ (r.canvas). Position (). Left  
 with document.getElementById ('my_id'). GetBBox (). X