Login/Register
DXIMageTransform.Microsoft.Matrix blurry in IE9
Asked Answered
Solved htmlcssinternet-explorerinternet-explorer-9quirks-mode
K

1

6

I've noticed in IE9 that using the matrix DXIImageTransform will pixelate rotated text. I don't have this problem in IE8 or 7. Normally I would use the css3 options in IE9 but for reasons outside my control, the page renders in quirks mode (valid html5 iframe embedded in a 3rd party page with no doctype)

This is the code I'm using: 

<!--Looks like crap but is my only option in quirks mode-->
<span style="position:absolute; 
    filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
    M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);">
  Does this make my butt look pixelated?    
</span>

In IE8, the result rotated text is smooth, but in IE9 it's very pixelated. Compare to this (which doesn't work in quirks mode)

<!-- looks great but doesn't work in quirks mode-->
<span style="position:absolute; top:150px; -ms-transform: rotate(-45deg);">
    Does this make my butt look pixelated?
</span>

To see it in action, check out this fiddle in IE9 http://jsfiddle.net/U4CCD/3/

My question, how can I rotate text in IE9, in quirks mode, that doesn't look all pixelated and blurry. Why did the matrix transform start sucking in IE9?

If you're fortunate enough not to be running IE9, this is what I'm seeing. The clearer example is how it looks in IE8 and how it looks using css3 transforms.

IE9 sucks

Kovar answered 12/11, 2012 at 20:49 Comment(0)
K
4

Ultimately I found that this simply could not be done with my current configuration. I was, however, able to work around it by wrapping my valid html5 page in an object that was then embedded in the iframe. In IE 9 this seemed to allow my page to render in the iframe in standards mode and use the SVG transforms that look clean. I created the following wrapper aspx script:

<%@ Page Language="C#" %>

<% 
    string url = "app/path";
    if(!String.IsNullOrEmpty(Request.QueryString["path"]))
        url = HttpUtility.UrlDecode(Request.QueryString["path"]);

    url += "?i=1";
    if(!String.IsNullOrEmpty(Request.QueryString["id"]))
        url += "&id=" + Request.QueryString["id"];

    if(Request.Browser.Browser!="IE"||Request.Browser.MajorVersion!=9) {
        Response.Redirect(url);   
    }
    url += "&quirky=1";
%>
<html>
<head><title></title>
</head>
<body style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;">
<object type="text/html" data="<% =url %>" style="overflow:hidden; width:100%; height:100%"></object>
</body>
</html>
Kovar answered 19/12, 2012 at 18:31 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.