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 Demo

初期状態

予想される動作である、ことを明らかにした内容は、容器、容器と背景画像の動きを膨張します。これはほとんどのブラウザで動作する方法です。 IE10で

予想オープン状態（アニメーション後）

、しかし、画像が含まれる要素の境界に沿って破断し、（直接遷移の速度に関連する）の​​間隔で繰り返されますコンテナ自体に（アニメーションの後）

IE10オープン状態

それはKingisbackの質問に関連することができるように、見えますBackground Image distortion in IE10 and moving the background with content flow?が、この場合のバックグラウンドがfixedもそうcoverに設定でもないという点で異なりますShaheerの答えは当てはまりません。

Answer 1

background-elementをCSS経由で新しい複合レイヤーにプロモートします。

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