Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?

问题

I'm trying to achieve the following in IE9, IE10, and IE11 (works perfectly on Chrome and FF):

In mobile mode, I have a main #container wrapper that holds the entire site contents and a nav side menu div which is inside the #container (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 #container 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).

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

回答1:

The problem here is with the use of position: fixed inside a transformed element. Per the specification, when using fixed-positioned elements ...the containing block is established by the viewport. There is a debate as to whether transformed elements should be the containing block of fixed descendants, but Internet Explorer doesn't presently support this.

In this particular instance you could avoid the cross-browser complications by avoiding CSS Transforms altogether. Instead, try moving the containing element laterally using the left property. Below is my markup — which I believe to be 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 side-to-side by transitioning (supported since IE10) the left property. We're also using the calc function (supported since IE9) to determine better dimensions 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 yields a more consistent experience across both Internet Explorer, Chrome, and Firefox. The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/vxntq8b1/

来源：https://stackoverflow.com/questions/27952725/why-doesnt-translatex-work-as-expected-for-fixed-elements-on-ie9-ie10-and-ie1

标签

html

css

internet-explorer

css-position