louisremi/jquery.transform.js — Issue #19: Not working in IE8, Not animating in IE9
Author: Rodeoclash
Created: 2011-11-10 06:01:16+00:00
State: open

Having some trouble getting this working in IE8 and 9.

At the moment I've got it working perfectly in IE6/7, Chrome and Firefox. I'm creating an outer element for positioning (an
set to absolute) and I have an inner div (class transform) that I apply the actual transformations to.

For some reason, the transform are not applied at all in IE8. I've uploaded two screenshots, the first is the transform working in IE9:

http://www.richardson.co.nz/bugs/working.png

and not working in IE8

http://www.richardson.co.nz/bugs/not_working.png

Secondly, the animations don't seem to be working in IE9. The regular jQuery animations work but the scale animation doesn't.

The code I use to initially place the items is as follows.

// set position and scale of each of the panel items
this.each(function(count, element, index, scale, left, zIndex) {
var $element = $(element);

// set position
$element.css({
position: "absolute",
left: left,
zIndex: zIndex
});

$element.find('.transform').css({
transform: "scale(" + scale + ")"
}, {preserve: true});

});

The code to animate the panels:

this.each(function(count, element, index, scale, left, zIndex) {
var $element = $(element);

$element.css({
zIndex: zIndex,
display: 'block'
});

$element.animate({
left: left
}, {queue: false});

$element.find('.transform').animate({
transform: "scale(" + scale + ")"
}, {queue: false, preserve: true});

if (this.isVisible(this.normaliseOffset(index))) {
$element.css({display: 'block'});
} else {
$element.css({display: 'none'});
}

});