html - 为什么我的 Web 图片库中的元素在 iOS 上消失了？

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

这里有一个 hacky 但有效的修复方法:

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

“但为什么这样做有效？”

因为它是一个移动浏览器引擎，WebKit WebCore 在执行 Composite 和 Paint 阶段时省去了很多弯路。它以电池生命周期的名义这样做，通常这是一个很好的权衡。通过应用 3D 转换(即使是空转换)，这两个阶段被传递给硬件加速(阅读:更耗电)图形引擎。

在您的例子中，这种切 Angular 发生在图像离开屏幕直到用户与之交互的那一点(点击它就可以了)。

由于这些调用仅在页面需要重绘(主要是滚动和缩放)时发生，因此对用户电池方面的损失应该是最小的。

---

事实证明，WebKit 的移动版本一直在努力应对图像密集型页面 for almost 6 years .顺便说一句，那里的解决方案实际上是相同的。有时旧方法仍然最有效 :p