relative elements within a transformed element

[JarnoLeConte]

In Internet Explorer there is a problem with the relative or absolute positioned elements within a transformed object. These elements don't transform in the correct way.

An example:
I have a parent DIV with an child image. These child image has the css value "position: relative;". When I rotate the DIV, the image don't rotate. Only in IE. In the other browsers this works perfect.

Another example:
I have a parent DIV with an child image. When both elements have a transform property the same problem as in my first example acts. The transform library gives the image an relative position that makes that the image don't work correct in IE when you rotated the Div.

[heygrady]

We're using relative positioning to make the transformation look the same in IE as in all other browsers. If you need to position the element, you should wrap it in a div first and position that div instead of the element you're trying to transform. There's really no other way around it. I started trying to write that into the library but it creates a ton of extra code for an edge case that easy enough to fix.

var $div = $('#some-div');

// this won't be positioned correctly in IE
$div.css({position: 'absolute', left: '100px'}).transform({rotate: 45}); 

// this should look much better
$div.transform({rotate: 45}).wrap('<div>').parent().css({position: 'absolute', left: '100px'}); 

[JarnoLeConte]

That is not my point, exactly. The point is that when you use a second transform element within an another transform element that these second one not positioned correctly in IE. This second one becomes a float/absolute element that not rotates with his parent. Also when the second element has an own DIV parent.

[heygrady]

I made a little test script. I seem to be able to get nested elements to transform. IE is stretching the outer element but that could be easily handled using wrappers as described above.

<style>
    div {
        width: 100px;
        height: 100px;
    }
    .outer {
        background-color: red;
    }
    .inner {
        background-color: blue;
    }
    .filter {
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand');
        zoom: 1;
    }
</style>
<!-- Rotate it with a simple filter -->
<div class="outer filter"><div class="inner filter">Top</div></div>

<!-- Rotate with the transform function -->
<div class="outer transform"><div class="inner transform">Top</div></div>
<script>
    $('.transform').transform({rotate: 45});
</script>