CSS Transform Property - Inconsistent results on IE9 & IE10

248 Views Asked by At

Title:CSS Transform Property - Inconsistent results on IE9 & IE10

This bog standard w3schools demo code below performs inconsistently when viewed on IE9 & IE10. The issue is a failure to recognise the transform property.

Works when opened with a file stored locally on a computer (ie.Desktop)
Fails when opened on a stored on a share drive e.g. A web server but accessed directly (not via http)
Works when the same file on the share is opened via a http reference.

Trying to identify the differentiating factors.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}
</style>
</head>
<body>

<div>Hello</div>
<br>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>

</body>
</html>
2

There are 2 best solutions below

0
Ashhad Sameer On

Latest w3schools code is

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
      transform: rotate(7deg);
   }

http://www.w3schools.com/cssref/css3_pr_transform.asp

0
dob_stack On

It looks like the issue was the browser switching in to Quirks Mode in certain contexts, and the fix was to add this to the top of the head...

<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

I presume that's still valid code for forcing latest Standards Mode.