Resize setViewBox problem IE 8

[phildej]

Raphael 2 commit August 7th: Elements which have been transformed are drawn in the wrong position after resizing the viewBox. Appears that the x,y, coordinates of transformed elements are not resized with the setViewBox (Works as expected in FireFox and Chrome).

Following code demonstrates the issue. Clicking on the "Click to Resize" will resize the viewBox, and the elements are correctly positioned and scaled. However clicking on the blue triangle transforms it but it is incorrectly positioned, though its bounding box is correct.

<script type="text/javascript"> var canvas_size = 250; window.onload = function(){ var paper2 = new Raphael(document.getElementById('canvas_container'), canvas_size, canvas_size); paper2.setViewBox(0,0,canvas_size,canvas_size,false); var tri= paper2.path("M 100 100 L 150 100 L 125 140 z").attr({ fill: "blue", }); var bBox =tri.getBBox(false); boundingBox = paper2.rect(bBox.x,bBox.y,bBox.width,bBox.height).attr({stroke:"red"}); tri.click(function(){ tri.attr({ fill:"red", transform:"...t0,40,r60" }); var bBox2 =tri.getBBox(false); }); var changesize = paper2.text(0,24,"CLICK TO\nRESIZE").attr({fill:'#ff0000', 'font-size':24, 'stroke-width':1,'text-anchor':'start' }); changesize.click(function(){ canvas_size=(canvas_size==500?250:500); paper2.setViewBox(0,0,canvas_size,canvas_size,false); }); }; </script>

There is another issue which appears to be related to resizing the div when rescaling using setViewBox or setSize...but more of that in a later issue when I have code snippet.

[gabel]

In my opinion this seems to be the same issue like #332

Example: http://jsfiddle.net/gabel/kKJLB/

Klick two times on "zoomin" and then "reset zoom" and you will see the result... in FF/Chrome the rectangle returns to it's initial viewbox but in IE it does not...

I am using the current chrome version and this example is showing the same error as for IE.

[varun729]

Here is what I think problem with setViewBox in IE is - still need to figure out a fix

Raphael uses its own feature element.transform() on the elements, when setViewBox() is called. This is conflicting with any transform operation which user does on the elements.

[Burkazoid]

Think this is probably the same issue as #468. I posted an example in there which shows a viewbox causing elements to change position in IE8 when they shouldn't (elements don't change position in latest browsers): http://www.burkazoid.com/other/raphael/1.html

[Burkazoid]

I posted a fix in #468 - give it a whirl and see if it fixes this issue.

[tomasAlabes]

Closed to follow 468