调整大小时的 IE10 背景图像伪影答案

【问题标题】：IE10 Background Image Artifacts on Resize调整大小时的 IE10 背景图像伪影
【发布时间】：2016-04-27 02:33:48
【问题描述】：

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

页面上有一个包含内容的元素。它有一个定位到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的答案没有不适用。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

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

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

【讨论】：

就是这样，是的！知道为什么会这样吗？
IE10 在背景图像与另一个元素共享图层时，它如何重新渲染/合成背景图像一定有一些错误。通过将元素提升到自己的层，GPU 硬件加速开始启动，合成阶段不会受到相邻重绘的干扰。
简答：“因为 IE”。