Question

这部分代码应该显示具有多个重叠图像的区域。每个图层都有一组图像选项，因此可以混合图层。

问题： 我在Chrome中遇到这些重叠图片的问题。它们位于绝对位置并具有设置的z索引。它们在“正常”浏览器大小中显示为预期，但是当增加这些图像的区域时，一些消失并显示白色块。这仅发生在Chrome中。我想确保这是大型显示器的未来证据。

我正在使用GPU加速-webkit-transform：translateZ（0）来加速应用程序。删除此选项可使所有图层在chrome中以大窗口大小显示。但是，这会降低应用程序的速度，并不能解决整个问题。这让我想保持变换翻译。当变换平移关闭时，图层仍然会消失并在切换（甚至一些未切换的图层）图像时显示为白色。

只有当前显示的图像层包含在DOM中，当切换一个图像层时，前面显示刚才最近的图像层的克隆，同时将新选择的图像层加载到后面。

在大屏幕上，图像尺寸为2048像素×1344像素，并缩放以适合窗口（但不超过该范围）。我认为这可能会在性能方面表现不佳，但它在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);  
}

在Chrome中缩放窗口时，分层背景图像无法呈现

0 个答案: