Why isn't this element rotation working?

Question

I'm trying to rotate text in IE8. According to this answer, it should be possible to rotate an element as tried in the following example:

<!DOCTYPE html>
<html>
<head>
    <style>
        #enclosing {
            width: 20px;
            height: 100px;
            border: 1px solid;
        }

        #rotated {
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="enclosing">
        <p id="rotated">rotated</p>
    </div>
</body>
</html>

(got the numbers from this generator)

If I inspect the p element with the dev tools I can see it is somehow affected, because the blue border showing the selected element is rotated correctly (but the actual element is not being rotated), see image below.

ispected with dev tools

Edit: For clarification, this is how it looks without the filter statement:

without filter statement

Yes, nothing happens without the vendor prefix. (Not even the rotation displayed in the picture) — rob, May 02 '13 at 14:48
Just a note from generator: _/* IE8+ - must be on one line, unfortunately */_ Is your declaration in one line? — Morpheus, May 02 '13 at 15:03
I think so... I tried the code exactly as posted in the question :) — rob, May 02 '13 at 15:07
Curious, are you testing this in IE10 running in IE8 doc mode or are you testing in a legit IE8 instance? — potench, May 02 '13 at 15:10
I tested the generator and your above code in IE10 running in IE8 mode and it did not work, however it does work as is in IE9 running in IE8 mode. — potench, May 02 '13 at 15:19
Thank you for this input... I will try and get an IE8 up and running in a VM. (Or is there a better way to install an IE8 on Windows 7, having an IE10 installed?) — rob, May 02 '13 at 15:21
I'm reading this doc to see if you can enable those DX properties in IE8-mode http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx — potench, May 02 '13 at 15:24
No, I'm on a Mac... but my only VM is a Win7 with IE10 :) Will check your link as well, thx. — rob, May 02 '13 at 15:38
Ah, in that case I shouldn't have deleted the link to curl install VirtualBox IE instances: http://www.markomedia.com.au/ie6-ie7-ie8-ie9/ — potench, May 02 '13 at 15:52

score 4 · Accepted Answer · answered May 02 '13 at 15:36

Your current markup works, the problem is that you have to enable legacy filters in IE10 to properly render your results in IE10 running in IE8-mode.

So, the answer then is to enable legacy filters: http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx

Go to "Settings [Gear]" >> "Internet Options" >> "Security" Then click "Custom Level" and scroll way down in the resulting window-pane to find the "Render legacy filters" option. Enable it.

Enable legacy filters in IE10

Spudley · Answer 2 · 2013-05-02T15:41:37.970

Given that you've clarified in the comments that you're testing in IE10's IE8 Comaptibility mode, rather than a real copy of IE8, this becomes easier to answer. The answer to your problem is explained here on MSDN

In short, IE10 considers the filter style to be obsolete and disables it by default even in compatibility mode. The can be enabled, but only by the end user.

IE9 is not affected by this; filter styles work fine in IE9, but for IE10 you will have a problem.

To quote:

For Internet Explorer 10, DX filters won't work (are obsolete) in the following document modes:

Quirks mode

IE10 standards mode

For other document modes, DX filters are (by default) disabled for the Internet Zone and enabled for the Local Intranet and Trusted Sites zones. This affects the following document modes:

IE9 Standards mode

IE8 Standards mode

IE7 Standards mode

IE5 (Quirks) mode

End-users can change these settings (for these document modes only) by using Internet Options to change the security settings for the zone in question. Administrators can also use Group Policy.

Note For security and performance reasons, this is strongly discouraged. In addition, webpages cannot modify these settings (generally for the same reasons).

The upshot of this is that for IE10, you cannot reliably use filter styles in compatibility mode.

This means that:

Using compatibility mode to test that your code works in older IEs is not a good test. You really need to use real copies of old IE versions in order to have an accurate test.
It is a bad idea to allow your site to be displayed using compatibility mode by your users. Force them to view the site in IEs best rendering mode using the X-UA-Compatible meta tag.

Thank you for this description. I definitely agree with you on the first point (specially after this has cost me a day). I did not know the second point was possible, but I think it won't be a big issue. Because who would run IE in compatibility mode other than for testing purposes? — rob, May 02 '13 at 15:47
@rob - there are config settings in IE that tell it to use compatibility mode by default in some cases. Some corporate users may have these settings enabled (and the end user may not even be aware of it), which means you can't be *certain* what mode your site will be rendered in for all users. You can use `X-UA-Compatible` to override these settings. — Spudley, May 02 '13 at 15:56
@rob - I would just use the `ie=edge` option; that's all you need. that tells IE to use the best mode available to it, whatever version it happens to be, which is what we generally want. the other options are unnecessary unless you actually want IE to use a compatibility mode. — Spudley, May 02 '13 at 17:36

Why isn't this element rotation working?

2 Answers2

Linked