为什么translateX不能正常工作在固定的元素在IE9，IE10和IE11？ [英] Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?

问题描述

我尝试在IE9，IE10和IE11（在Chrome和FF上完美运行）中实现以下功能：

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

在移动模式下， #container 包含整个网站内容的包装器和一个位于 #container 移出，btw），但不可见，并隐藏在屏幕外。当用户点击菜单打开切换按钮时，它应该滑动 #container 到右边，显示导航边菜单div直接定位到它的左边。 滑动发生在使用translateX，一旦打开类通过切换应用它就被分配。在IE中，我得到了所期望的动画部分，但没有可见的侧边nav（只有空白）。

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

推荐答案

在转换后的元素中使用 position：fixed 。根据规范，当使用固定位置元素时，包含块由视口建立。 关于变换的元素是否应该是包含固定后代的块，但Internet Explorer目前不支持这一点，有争论。

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.

在这个特殊的例子中，你可以通过避免CSS转换来避免跨浏览器的复杂性。相反，请尝试使用左属性横向移动包含元素。下面是我的标记—我相信这是对你的合理反映：

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>

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

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

这种方法在Internet Explorer，Chrome和Firefox 。最终结果可以在这里查看： http://jsfiddle.net/jonathansampson/vxntq8b1/

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/

>

这篇关于为什么translateX不能正常工作在固定的元素在IE9，IE10和IE11？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！