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

Question

I'm looking for some help or documentation around what I think is an IE10 render/repaint bug.

There is a content-containing element on a page. It has a background image positioned to center bottom . In the case of the build I am working on, the background image is dynamically injected by the CMS — hence the reprehensible inline style. Content exists on page load but is hidden; to be revealed when the user expands an accordion-type UI element.

<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

Initial State

The expected behavior is that, as the revealed content expands the container, the background image moves with the container. This is how it works in most browsers.

Expected Open State (after animation)

In IE10, though, the image is fractured along the border of the contained element, and repeated at intervals (directly related to the speed of the transition) in the container itself.

IE10 Open State (after animation)

It looks like it may be related to Kingisback 's question, Background Image distortion in IE10 and moving the background with content flow? but differs in that the background in this case is neither fixed nor set to cover so Shaheer 's answer doesn't apply.

Answer 1

Promote background-element to a new composite layer via CSS.

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