translation not working properly in IE8

[abhayastudios]

Hi,

I am using your JQuery 2D transform plugin to rotate images as follows:

$("#crop_container img").transform(
{
translateX: translateX+'px',
translateY: translateY+'px',
rotate: rotation+'deg'
});

Where the crop_container is an absolutely positioned div wrapped around the image as you suggested in another issue. The translation is calculated on basis of the image orientation (portrait/landscape) and its rotation. For landscape and 90 or 270 degrees it is:

translate=(imagewidth-imageheight)/2;
translateX = '-'+translate;
translateY = translate;

All is good in FF/Webkit/IE9, but in IE8 it seems the translation is off. I read in a wiki page that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". If this is true then I must be doing something wrong or there is a bug.

Any ideas/advice?

Thanks!

[brendanmckeown]

I'm also having trouble with this same issue. In IE 8, when a rotated object is translated, it moves along it's own axis, not straight up/down/left/right, so you can get some funky results. Every other browser including IE 9 performs this transformation correctly. See this example: http://jsfiddle.net/kzMff/9/

Does anyone have a solution to this?

[brendanmckeown]

I found a fix for this issue, at least for my usage. In the execMatrix function, replace this line (around 290):

this.fixPosition(matrix, tx, ty);

with this:

// factor in the object's current rotation so translation remains straight up/down/left/right
// otherwise, object will be translated along the rotated axis, which produces undesirable effects
var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted
radians = rotation * (Math.PI / 180), // convert degrees to radians
newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x
newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y

this.fixPosition(matrix, newX, newY);

Hope this helps.