ansaurus

Question

dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode

Answer 1

A:

I think the position absolute stops the filter from inheriting. I found the same thing when I was experimenting with blur filters recently, except in that case I wanted a way to make the filters stop inheriting. I hadn't realised IE8 was different from IE6/7 in this respect.

Is this the effect you're trying to get?

Rotate in IE8 using margin instead of position

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
</head>
<body>
    <div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
        <div style="margin-top:10px; margin-left:10px; border:1px solid darkblue;">
            I do not rotate in IE 8.
        </div>
    </div>
</body>
</html>

Of course, if you needed the child element absolutely position for a specific reason you may be out of luck (might be able to achieve something with floats, but it would depend exactly what you needed).

robertc 2010-06-16 22:16:14

Hi RobertC, if that were true, how come I'm seeing partial implementation? Did you try your suggestion? When I try it, the issue still remains. In fact, it seems worse since it's now rotating off axis.http://tinypic.com/r/2dhis95/6

davydka 2010-06-17 18:21:40

Sorry, I misunderstood your issue.

robertc 2010-06-18 00:14:25

Edited: I've tried answering the question you actually asked this time.

robertc 2010-06-18 00:29:47

Hi RobertC, Thank you for your replies. That is the effect I am going for. Floats are an interesting idea. Forcing 'Compatibility Mode' also solves the problem. This can be done by putting the following meta tag in the header.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >So, the real question I'm wondering is: Should this different/newer rendering in IE8 be considered more "correct", or should it be considered a bug?

davydka 2010-06-18 23:19:40

I think I prefer having a way to 'turn off' filters on descendent elements and still be able to position relative to the containing block, but I'm not sure if it's compatible with the way CSS transforms work in other browsers.

robertc 2010-06-19 10:12:31

Yeah, in the introduction of the spec: "Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants." I think what IE6/7 is doing is 'more correct' in the sense that they more closely match the standard for transforms but, of course, when you're using proprietary browser extensions 'more correct' doesn't really apply.

robertc 2010-06-19 10:25:39

Excellent. Is clears things up for me. Thanks!

davydka 2010-06-19 22:45:41

ansaurus

tags:

views:

answers:

dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode

related questions