Saturday, 25 August 2012

Fixing image size of Raphael.js image in IE8.

Raphael.js is using VML instead of SVG in IE6-8.
While most of the functionality was working fine for me, I've found out that .image is rendered with corrupted size.

After few hours of debug I've figured out that VML implementation is missing measurement points in image tag size definition.


Line number 4952 missing “pt” constant that has to be present in VML tag. So just changing 
fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);
to something like

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";
helped me out. 
Side note: still had to division by constant to scale appropriately.