IE9 CSS issues with hamburger menu

Question

I'm using the Pure Drawer scripts to generate a slider drawer navigation scheme for an upcoming site ( http://advanced1772.inmotionhosting.com/~authenticstoryte/ ). Works great, but the client wants it to work in IE9 (yea, really....) and on IE9, the hamburger menu looks like it just went through a demolition derby. I think it might be because of the fact it used :before and :after pseudo elements to generate the menu. So is there an alternative method to make this work on IE9. The drawer itself works just great. It's the hamburger icon that's the issue:

HTML

<div class="pure-container" data-effect="pure-effect-slide">
<input type="checkbox" id="pure-toggle-right" class="pure-toggle" data-toggle="right">
<label class="pure-toggle-label" for="pure-toggle-right" data-toggle-label="right">
<span class="pure-toggle-icon"></span> </label>
<div class="pure-drawer" data-position="right">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-nav-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://advanced1772.inmotionhosting.com/~authenticstoryte/sample-page/">Sample Page</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-17"><a href="http://advanced1772.inmotionhosting.com/~authenticstoryte/2016/04/25/hello-world/">Hello world!</a></li>
</ul>
</div>
</nav>
</div>
<div class="pure-pusher-container">
<div class="pure-pusher">

CSS

.pure-toggle-label { border: none!important; top: 4px!important; }
.pure-toggle-label .pure-toggle-icon {
    transform: translate3d(-50%, -4px, 0);
    -webkit-transform: translate3d(-50%, -4px, 0);
}
.pure-toggle-label .pure-toggle-icon, .pure-toggle-label .pure-toggle-icon::before, .pure-toggle-label .pure-toggle-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 35px;
    cursor: pointer;
    background: #5d809d;
    display: block;
    content: '';
    transition: all 500ms ease-in-out;
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

Answer 1

Tested with your page in IE9 emulation, I added these:

.pure-toggle-label .pure-toggle-icon::after {
    -ms-transform: translate(-50%, 10px);
}
.pure-toggle-label .pure-toggle-icon::before {
    -ms-transform: translate(-50%, -14px);
}

This will leave the translate3d alone, though it looks like you really only need 2d.

For the transition effects see: Does IE9 support transition CSS3 effects?