使用IE 10进行CSS转换

Question

so I have this small CSS transition that works pretty good in both Firefox and Chrome (latest builds). However it looks like garbage in IE 10 (doesn't render properly). I am wondering if there is some hack to have it appears as it does in other browsers.

Here is the link to a pen on codepen (look in IE 10). Works great in Chrome or Firefox.

I included all the code here as I know some people hate when it's not in the question. but is all viewable in the pen. Any way insight onto how I fix this would be awesome.

CSS:

#menu-icon {
    border-radius: 0.2em;
    display: block;
    color: white;
    font-size: 4em;
    font-weight: 900;
    width: 1.5em;
    background: grey;
    letter-spacing: -0.17em;
    line-height: 0.4em;
    position: absolute;
    bottom: 8em;
    left: 4em;
    height: 1.4em;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

#menu-icon span {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.menu-bar {
    top: -0.4em;
    position: relative;
    width: 90%;
    margin-left: 0%;
    margin-right: 10%;
}

.menu .bar-left {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}

.menu .bar-right {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}

.arrow .bar-left {
    height: 0.3em;

    -webkit-transform: translate(0.34em, 0.05em) rotate(35deg);
       -moz-transform: translate(0.34em, 0.05em) rotate(35deg);
            transform: translate(0.34em, 0.05em) rotate(35deg);

            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;

            transform-origin: center center;
    -webkit-transform-origin: center center;
}

.arrow .bar-right {
    height: 0.3em;
    -webkit-transform: translate(-0.34em, 0.15em) rotate(-35deg);
       -moz-transform: translate(-0.34em, 0.15em) rotate(-35deg);
            transform: translate(-0.34em, 0.15em) rotate(-35deg);

            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;

            transform-origin: center center;
    -webkit-transform-origin: center center;
}

HTML:

<div id="menu-icon" >
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
</div>

JS:

function init() {
    var menu = document.getElementById("menu-icon");
    if(menu.addEventListener) {
        menu.addEventListener("click", function() { 
            if(menu.className=="arrow") {
                menu.className = "menu";
            } else {
                menu.className = "arrow";
            }
        }, false);
    } else if(menu.attachEvent) {
        menu.attachEvent("onclick", function() {
            if(menu.className=="arrow"){
                menu.className = "menu";
            }else{
                menu.className = "arrow";
            }
        });
    }
};
if(window.addEventListener) {
    window.addEventListener("load", init, false);
} else if(window.attachEvent) {
    window.attachEvent("onload", init);
} else {
    document.addEventListener("load", init, false);
}

Answer 1

This is not so much an answer as to 'why' this happens, simply a way to deal with it... The true answer to that question is simply just that Internet Explorer is terrible.

Instead, just as a little workaround, IE seems to handle animations on other elements better than it does on text. So, my suggestion would be to take out the underscores in your spans, and just style the span elements to look the same. I've made a modified version of your pen to show this in use (code might be a bit messy as I just kind of hacked it from what you had to this, so keep in mind that there is room for improvement there)

http://codepen.io/anon/pen/DGnwt

Answer 2

Use the vendor prefix:

-ms-

Example:

-ms-transform: translate(0.34em, 0.05em) rotate(35deg);

Here you can find out more about vendor prefixes: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

But an even better solution, remove all the prefixes in your CSS. Example, only use this:

transform: translate(0.34em, 0.05em) rotate(35deg);

Then go to this page, http://modernizr.com/ Click on Production and check all the features you have used and it will add the necessary lines of CSS with prefixes for you in order to support multiple browsers. Download it. Put it in

<head></head>

like a Javascript file.

You could also use this: http://leaverou.github.io/prefixfree/