Question

我在网站上有一个以滚动版式排列的图像库。在PC上，将显示所有图像。在Android上，所有图像都会显示。在iPhone上，使用与Android（Chrome或Firefox）相同的浏览器，在滚动浏览这些图像时，其中的某些图像不会显示，或者只有一半出现，直到它们在屏幕外滚动然后再次返回。图像仍然存在于布局中，并且仍然可以点击以打开灯箱。为什么会这样呢？我正在使用lozad.js尝试解决此问题（因为我认为可能只是一次加载太多数据），但是在实现lozad之前就存在该问题。这是每个图片的代码：

.gallery {
  padding-top: 13px;
  z-index: 3;
  position: relative;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 13px);
}

.thumbnail {
  min-height: 25%;
  width: 25%;
  margin: 10px;
  border-radius: 10px;
}

/** LIGHTBOX MARKUP **/
.lightbox {
  /** Default lightbox to hidden */
  display: none;
  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 5%;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;
  /** Unhide lightbox **/
  display: block;
}

<div id="mobile" class="gallery">
  <!-- thumbnail image wrapped in a link -->
  <a href="#img1-mobile">
    <img src="thumb/lo/1.jpg" data-src="thumb/hi-mobile/1.jpg" class="lozad thumbnail">
  </a>
  <!-- lightbox container hidden with CSS -->
  <a href="#_" class="lightbox" id="img1-mobile">
    <img src="img/lo/1.jpg" data-src="img/hi/1.jpg" class="lozad">
  </a>
  <!-- thumbnail image wrapped in a link -->
  <a href="#img2-mobile">
    <img src="thumb/lo/2.jpg" data-src="thumb/hi-mobile/2.jpg" class="lozad thumbnail">
  </a>
  <!-- lightbox container hidden with CSS -->
  <a href="#_" class="lightbox" id="img2-mobile">
    <img src="img/lo/2.jpg" data-src="img/hi/2.jpg" class="lozad">
  </a>
  <!-- thumbnail image wrapped in a link -->
  <a href="#img3-mobile">
    <img src="thumb/lo/3.jpg" data-src="thumb/hi-mobile/3.jpg" class="lozad thumbnail">
  </a>
  <!-- lightbox container hidden with CSS -->
  <a href="#_" class="lightbox" id="img3-mobile">
    <img src="img/lo/3.jpg" data-src="img/hi/3.jpg" class="lozad">
  </a>
  ...
</div>

Answer 1

这是一个骇人但有效的解决方法：

#mobile img {
  transform: translate3d(0, 0, 0);
}

“ 但是为什么行得通？”

由于它是一个移动浏览器引擎，因此WebKit WebCore在执行Composite和Paint阶段时可以节省很多时间。它是以电池寿命的名义进行的，通常这是一个很大的权衡。通过应用3D转换（甚至是零转换），这两个阶段将传递给硬件加速的图形引擎（阅读：更多的电力需求）。

在您的情况下，当图像从屏幕上移开直到用户与之交互的位置（单击即可完成操作）时，就会发生切角。

由于这些调用仅在页面需要重新粉刷（主要是滚动和缩放）时发生，因此对用户的电池影响应最小。

事实证明，WebKit的移动版本在图像繁重的页面for almost 6 years中苦苦挣扎。顺便说一下，那里的解决方案实际上是相同的。有时，旧方法仍然效果最好：p

为什么我的网络图片库中的项目在ios上消失了？

1 个答案: