CSS Hamburger menu icon not displaying properly in ie9

Question

I have inserted a 'hamburger' menu icon into my website's header using only CSS3 code obtained from codrops website. The icon uses the pseudoclasses :before and :after and it works perfectly in the latest version of Chrome and in IE11. However, using IE9 (which our organization uses at work), the initial trigger icon does not even display properly and only one of the 3 lines (the middle line I think) is visble on loading the page. I have not had any issues previously with IE9 using these pseudoclasses. I have checked that there is nothing in my html making IE9 revert to quirks mode and can confirm that this problem is occurring in IE9 standards mode. I have also checked the original demo on the codrops website http://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html and the same problem occurs. I have also used IE9 outside of my place of work and the same thing happens, only one line of the 'hamburger' is visble.

The CSS used for the icon is below (I am aware that none of the CSS3 animations will work in IE9 but this shouldn't stop the initial trigger icon from displaying properly should it?);

.bt-menu-trigger {
    position: fixed;
    top: 22px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1100;
}

.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}

.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.bt-menu-trigger span:before {
    -webkit-transform: translateY(-250%);
    transform: translateY(-250%);
}

.bt-menu-trigger span:after {
    -webkit-transform: translateY(250%);
    transform: translateY(250%);
}

.bt-menu-open .bt-menu-trigger span:before {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

The HTML markup used in the webpage is:

<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
    <ul>
        <li><a href="http://www.acutemedicinebhh.com/home.html">home</a></li>
        <li><a href="http://www.acutemedicinebhh.com/documents.html">documents</a></li>
        <li><a href="http://www.acutemedicinebhh.com/medical-on-call.html">medical on-call</a></li>
        <li><a href="http://www.acutemedicinebhh.com/learning.html">learning</a></li>
        <li><a href="http://www.acutemedicinebhh.com/acp.html">acp</a></li>
        <li><a href="http://www.acutemedicinebhh.com/nursing.html">nursing</a></li>
        <li><a href="http://www.acutemedicinebhh.com/about-us.html">about us</a></li>
    </ul>
</nav>

Any help with how to make the hamburger display properly in IE9 would be really appreciated!

Answer 1

CSS transforms are supported in IE9 with -ms- prefix, according to CanIUse.