3

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

问题： 我对 Chrome 中的这些重叠图像有疑问。它们是绝对定位的，并且具有设置的 z-indexes。它们在“正常”浏览器大小中按预期显示，但是当增加这些图像的区域时，一些会消失并显示白色块。这只发生在 Chrome 中。我想确保这是大型显示器的未来证明。

我正在使用带有 -webkit-transform: translateZ(0) 的 GPU 加速来加速应用程序。删除它会使所有图层即使在 chrome 中的大窗口大小上也能显示。但是，这会减慢应用程序的速度，并且不能解决整个问题。这让我想保持转换翻译。当transform translate关闭时，图层图像仍然会消失并在切换（甚至是一些未切换的图层）图像时显示白色。

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

大屏幕上的图像尺寸为 2048 x 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);  
}
4

0 回答 0