title: Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?
body: <p>I'm trying to achieve the following in IE9, IE10, and IE11 (works perfectly on Chrome and FF):</p>
  
  <p>In mobile mode, I have a main <code>#container</code> wrapper that holds the entire site contents and a nav side menu div which is inside the <code>#container</code> (cannot be moved out, btw), yet is not visible and is hidden off-screen. When a user clicks a menu open toggle button, it should slide the <code>#container</code> to the right, revealing the nav side menu div directly positioned to its left. The "sliding" is happening using translateX, which gets assigned as soon as the "open" class gets applied to it via the toggle. In the IEs, I'm getting the animation part as expected, but without a visible side nav (empty space only).</p>
  
  <pre><code>#container {
      height: 100%;
      position: relative;
      transition: transform ease .5s;
      width: 100%;
  }
  #container.open {
      position: fixed;
      transform: translateX(300px);
  }
  
  #nav-side-menu {
      left: -300px;
      height: 100%;
      overflow: scroll;
      position: fixed;
      top: 0;
      width: 300px;
  }
  </code></pre>