对于 IE9、IE10 和 IE11 上的固定元素，为什么 translateX 不能按预期工作？

Question

我正在尝试在 IE9、IE10 和 IE11 中实现以下目标（在 Chrome 和 FF 上完美运行）：

在移动模式下，我有一个主要的 #container 包装器，它包含整个网站内容和一个导航侧菜单 div，它位于 #container 内（不能移出，顺便说一句），但不可见并被隐藏屏幕外。当用户单击菜单打开切换按钮时，它应该将#container 滑动到右侧，从而显示直接位于其左侧的导航侧菜单 div。 “滑动”是使用 translateX 发生的，一旦通过切换将“打开”类应用到它，它就会被分配。在 IE 中，我按预期获得了动画部分，但没有可见的侧导航（仅限空白区域）。

#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

这里的问题是使用position: fixed inside 转换的元素。根据规范，当使用固定位置的元素 ...包含块由视口建立。 There is a debate 关于转换后的元素是否应该是固定后代的包含块，但 Internet Explorer 不'目前不支持。

在这种特殊情况下，您可以通过完全避免 CSS 转换来避免跨浏览器的复杂性。相反，请尝试使用 left 属性横向移动包含元素。以下是我的标记 - 我认为这是您的合理反映：

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

如上所述，以下方法主要使用相对定位的容器，通过转换（自 IE10 起支持）left 属性来左右移动。我们还使用calc 函数（从 IE9 开始支持）来确定更好的尺寸和偏移量：

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

这种方法可以在 Internet Explorer、Chrome 和 Firefox 中产生更一致的体验。最终结果可以在这里在线查看：http://jsfiddle.net/jonathansampson/vxntq8b1/