Why does translateX not work as expected for fixed elements in IE9, IE10 and IE11?

Question

I am trying to achieve the following results in IE9, IE10 and IE11 (works fine on Chrome and FF):

In mobile mode, I have the main shell #container , which contains all the contents of the site and the navigation menu div, which is inside the #container (cannot be displayed, by the way), but is not visible and is hidden outside the screen. When the user presses the open menu button, he should shift #container to the right, indicating that the navigation menu of the div is located to his left. The "rolling" happens using translateX, which is assigned as soon as the "open" class is applied to it using the switch. In IE, I get part of the animation as expected, but without the visible side of nav (only empty space).

 #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; } 

Answer 1

The problem is using position: fixed inside the transformed element. In the specification, when using elements with fixed positioning ... the containing block is set in the viewport. There is debate about whether transformed elements should be a containing block of fixed descendants, but Internet Explorer does not currently support this.

In this particular case, you could avoid cross-browser complications by avoiding CSS conversions altogether. Instead, try moving the containing element using the left property. Below is my markup; which I consider a reasonable reflection of yours:

 <article> <nav> <p>This is the navigation portion.</p> </nav> <section> <p>This is the content portion.</p> </section> </article> 

As described above, the following approach makes key use of a relatively positioned container, moved from side to side, by moving (supported with IE10) the left property. We also use the calc function (supported with IE9) to determine the best sizes and offsets:

 body { margin: 0; overflow-x: hidden; } article { left: -300px; position: relative; transition: left 2s; box-sizing: border-box; width: calc(100% + 300px); padding: 0 1em 0 calc(300px + 1em); } article.open { left: 0px; } nav { position: fixed; width: 300px; height: 100%; margin: -1em auto auto calc(-300px - 1em); } 

This approach provides a more consistent experience in both Internet Explorer, Chrome, and Firefox. The final result can be seen here: http://jsfiddle.net/jonathansampson/vxntq8b1/