javascript - Chrome でウィンドウを大きくすると、レイヤー化された背景画像のレンダリングに失敗する

Question

コードのこの部分は、複数の画像が重なっている領域を表示することになっています。各レイヤーには一連の画像オプションがあるため、レイヤーを混在させることができます。

問題: Chrome でこれらの重複する画像に問題があります。これらは絶対位置に配置され、z インデックスが設定されています。「通常の」ブラウザ サイズでは期待どおりに表示されますが、これらの画像の領域を拡大すると、一部が消えて白いブロックが表示されます。これは Chrome でのみ発生します。これが大型ディスプレイの将来の証拠であることを確認したい.

-webkit-transform: translateZ(0) で GPU アクセラレーションを使用して、アプリを高速化しています。これを削除すると、クロムの大きなウィンドウ サイズでもすべてのレイヤーが表示されます。ただし、これによりアプリの速度が低下し、問題全体が解決するわけではありません. これにより、変換を平行移動させておきたいと思うようになります。トランスフォーム変換がオフの場合でも、1 つのレイヤーの画像を切り替えると (切り替えられなかったレイヤーの一部であっても)、レイヤー画像が消えて白く表示されます。

現在表示されている画像レイヤーのみが DOM に含まれ、いずれかが切り替えられると、最近の画像レイヤーのクローンが前面に表示され、新しく選択された画像レイヤーが背面に読み込まれます。

画像サイズは大画面で 2048px x 1344px で、ウィンドウに合わせてスケーリングされます (ただし、それを超えることはありません)。これはパフォーマンス面で重いかもしれないと思いますが、Firefox と IE では完璧に動作します。どんな回答にも感謝します。

HTML

<div class="container">

   <div id="layer-1" class="layer" style="z-index: 1;">
      <div class="layer-option" style="background-image: url(layer1-option1.png);"></div>
      <div class="clone" style="background-image: url(layer1-option1.png);"></div>
   </div>
   <div id="layer-2" class="layer" style="z-index: 2;">
      <div class="layer-option" style="background-image: url(layer2-option1.png);"></div>
      <div class="clone" style="background-image: url(layer2-option1.png);"></div>
   </div>
   <div id="layer-3" class="layer" style="z-index: 3;">
      <div class="layer-option" style="background-image: url(layer3-option1.png);"></div>
      <div class="clone" style="background-image: url(layer3-option1.png);"></div>
   </div>
   <div id="layer-4" class="layer" style="z-index: 4;">
      <div class="layer-option" style="background-image: url(layer4-option1.png);"></div>
      <div class="clone" style="background-image: url(layer4-option1.png);"></div>
   </div>
   <div id="layer-5" class="layer" style="z-index: 5;">
      <div class="layer-option" style="background-image: url(layer5-option1.png);"></div>
      <div class="clone" style="background-image: url(layer5-option1.png);"></div>
   </div>
   <div id="layer-6" class="layer" style="z-index: 6;">
      <div class="layer-option" style="background-image: url(layer6-option1.png);"></div>
      <div class="clone" style="background-image: url(layer6-option1.png);"></div>
   </div>
   <div id="layer-7" class="layer" style="z-index: 7;">
      <div class="layer-option" style="background-image: url(layer7-option1.png);"></div>
      <div class="clone" style="background-image: url(layer7-option1.png);"></div>
   </div>
   <div id="layer-8" class="layer" style="z-index: 8;">
      <div class="layer-option" style="background-image: url(layer8-option1.png);"></div>
      <div class="clone" style="background-image: url(layer8-option1.png);"></div>
   </div>
   <div id="layer-9" class="layer" style="z-index: 9;">
      <div class="layer-option" style="background-image: url(layer9-option1.png);"></div>
      <div class="clone" style="background-image: url(layer9-option1.png);"></div>
   </div>

</div>

CSS

.layer {
   background-repeat:no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   top: 0;
   background-size:100%;
   -webkit-transform: translateZ(0);   
}

.layer layer-option {
   position: absolute;
   width: 100%;
   height: 100%;
   background-repeat:no-repeat;
   background-size:100%;
   -webkit-transform: translateZ(0);  
}