調整大小的 IE10 背景圖像偽影

Question

我正在尋找有關我認為是 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 演示

初始狀態

預期的行為是，隨着顯示的內容擴展容器，背景圖像隨容器移動。 這就是它在大多數瀏覽器中的工作方式。

預期打開狀態（動畫后）

但是，在 IE10 中，圖像會沿着所包含元素的邊界斷裂，並在容器本身中間隔重復（與轉換速度直接相關）。

IE10 打開狀態（動畫后）

看起來它可能與Kingisback的問題有關， IE10 中的背景圖像失真以及隨內容流移動背景？ 但不同之處在於，這種情況下的背景既不是fixed也不是設置為cover因此Shaheer的回答不適用。

Answer 1

通過 CSS 將background-element提升到新的復合層。

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