CSS3 transform property working differently in Internet Explorer
Easier Approach
Instead of positioning from the top
and left
, position instead from the bottom
and right
. After you've done this, simply change your -50%
translations to positive 50%
. This will remove the overflow e.g.
.center-center {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
You can see these changes in action here: http://jsfiddle.net/bd17gsss/
It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.
Original Answer
There appears to be a layout bug with position: absolute
in this particular demo. It's behaving similar to position: relative
when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.
For now, you could switch your position value from absolute
to fixed
, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal
style class that will center anything it is applied to.
The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.
.modal {
position: fixed;
top: 50%; left: 50%;
background-color: red;
transform: translate(-50%, -50%);
}
To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:
(function () {
var xandy,
index = 0,
modal = document.querySelector( ".modal" ),
sizes = [
{ x: "50%" , y: "30%" },
{ x: "400px", y: "288px" },
{ x: "25vw" , y: "75vh" },
{ x: "90%" , y: "90%" }
];
setInterval(function changeSize () {
xandy = sizes[ index++ % sizes.length ];
modal.style.width = xandy.x;
modal.style.height = xandy.y;
}, 1000 );
}());
The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/
CSS rotate property in IE
To rotate by 45 degrees in IE, you need the following code in your stylesheet:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.
The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).
Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.
All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform
style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */
Hope that helps.
Edit
Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.
Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:
-sand-transform: rotate(40deg);
Much easier than the traditional filter
style you'd normally need to use in IE.
Edit
Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform
and the old style IE -ms-filter
. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter
style by using the Sandpaper polyfill mentioned above.
CSS3 transform:scale in IE
IE9 supports transform:
-ms-transform: scale(0.5,0.5);
For other versions of IE, there's a complex syntax. Something like this:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
Look here for more info.
CSS Rotate IE7 and 8
IE5.5, IE6, IE7 and IE8 are supporting filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
IE5 don't support it!
Source
To change rotation origin using DX Filters just use Matrix filter to change the position of your element. You can have multiple filters on one element. You need to do a little math. Good luck with that!
Related Topics
Choosing Efficient Selectors Based on Computational Complexity
CSS Multiple Backgrounds Not Working on IE8
How to Change Border Color of Required Input Fields
Why Doesn't CSS-Calc() Work When Using 0 Inside the Equation
CSS Variables - Swapping Values
Web-Kit and Sub-Pixel Values, Workaround
"Position: Fixed" Not Woking When Parent Has the "Transform" CSS Property
CSS Print Style Sheets - Examples
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)
Whitespace in Wrapped Form Element
Generic @Mixin for SASS with Multiple and Varied Values
Why an Inline-Block Container Doesn't Collapse When Contains Only Floated Items
Inside Transparent Arrow on the Left
Why Is the Two P-Tags Not Beside Each Other When the Screen Is Wide
CSS Drop Down Navigation, 3Rd Level Issue
CSS Element Child VS Child with Text Node