IE10背景图像工件调整大小

Question

我正在寻找一些关于我认为是IE10渲染/重绘bug的帮助或文档。

页面上有一个包含内容的元素。它的背景图像位于center bottom。在我正在进行的构建的情况下，背景图像由CMS动态注入 - 因此是应受谴责的内联样式。内容存在于页面加载但隐藏;在用户展开手风琴式UI元素时显示。

<div class="background-element" style="background-image:url('http://placekitten.com/1500/100');">
    <div class="foreground-element">
        <div class="content">
            <h1>Some Content</h1>
            <p>Some filler copy. Some filler copy. Some filler copy.</p> 
        </div>
    </div>
</div>

JSFiddle Demo

初始状态

预期的行为是，当显示的内容扩展容器时，背景图像随容器移动。这是它在大多数浏览器中的工作方式。

预期开放状态（动画后）

然而，在IE10中，图像沿着所包含元素的边界断裂，并且在容器本身中以一定间隔（与转换的速度直接相关）重复。

IE10开放状态（动画后）

看起来它可能与Kingisback的问题Background Image distortion in IE10 and moving the background with content flow?有关，但不同之处在于，此案例中的背景既不是fixed也不是cover所以Shaheer的答案不适用。

Answer 1

通过CSS将background-element提升为新的复合图层。

.background-element {
  transform: translateZ(0);
}