Consistent Origin in CSS Rotation Between IE8 and Everything Else

Consistent origin in CSS rotation between IE8 and everything else?

Well this turned out not to be simple... Spudley's comment confirmed my suspicion that it's worth writing off manually entered CSS as a lost cause. It seems there's no simple way to make IE rotations match other browsers in origin without very complex matrix calculations to rotate and translate and also another calculation for how much to offset the object post-rotation using top: left: etc...

The option that seems to work best - least code, fewest non-standard dependencies - was jquery.transform2d.js via the louisremi branch of jquery.transform.

Here's an example demo where the rotation position is virtually pixel-perfect between IE7, IE8, IE9+ and Firefox, Chrome, etc - http://jsbin.com/ejiqov/3.

Apply rotations like this: $('somejQuery').css('transform','rotate(90degs)'); or for animated rotation, like this: $('somejQuery').animate('transform','rotate(90degs)');

That demo shows the one limitation I've come across so far (touch wood) with the Jquery Transform plugin for simple rotation (other than requiring jQuery):

It erases any positioning (top:, left:) on the element that it rotates.
- Workaround: Apply positioning to a wrapper element, and rotate the inner element. This seems to work fine (see demo above)

DXIMageTransform.Microsoft.Matrix blurry in IE9

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>

CSS transform: rotate() affecting overall design with position: absolute (not aligning properly)

This happens because the nav element has different width and height. By default an element is rotated by its centre, so in case of your nav the corners of this block after rotation don't match. The solution to this problem is to set the transform-orgin property that will move the rotation point so that the bottom left corners before and after transformation are in the same place. In your case it's transform-origin: 75px 75px; (works independently of the <a> length).

Here's the fiddle

Unfortunately it won't solve the problem for IE8- as those browsers doesn't support transformation and use their own way of rotating things.

Forcing IE8 to rerender/repaint :before/:after pseudo elements

Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.

It works for me; hope it helps you!

Weird difference with background color caused by external/internal css document?

I pulled the code out of the style section and placed it into a local style2.css file and put the rest of the code into an index.html file and was able to reproduce the effect you're describing, but only in Chrome (and in Chrome it doesn't produce the effect in jsfiddle). The rule that is likely causing the fade is the transition on the .stripe rule, though. It sounds like the issue you are describing is caused by a bug in Chrome. See this question for more information: Stop CSS3 transition from firing on page load

Consistent Origin in CSS Rotation Between IE8 and Everything Else