iOS11图像渲染问题

Question

iOS11的iPhone设备在渲染图像时存在问题。我的做法是在滚动时懒加载图像列表，但是随机地有些图像无法渲染出来。我已经尝试使用Safari桌面版进行调试，它显示img标签确实已经设置了src属性，但仍然不会渲染，直到我执行打开完全覆盖该区域的任何层的操作。

我尝试过的事情：

1. 使用transform3d进行GPU渲染。同时使用opacity和will-change。
2. 通过JS向元素添加一些样式，以触发回流/重绘

一个疑问: 是否与PPI（每英寸像素数）有关？当前为150PPI，是否需要将其降低到72PPI？。

我本来想给出问题实际发生的链接，但很抱歉无法这样做。

Fiddle示例：

http://jsfiddle.net/y37eL2hp/4/

全屏显示：http://fiddle.jshell.net/y37eL2hp/4/show/light/

HTML

<div ng-app="myapp">
  <div ng-controller="Mycontroller">
    <div class="my-product" ng-repeat="product in products track by $index">
      <div class="my-productimgblk">
            <ng-lazy-load-img imgsrc="product" class="lazy-smooth-load my-productimg" elem-type="img" elem-width="309" elem-height="400" load-offset-top="860"></ng-lazy-load-img>
      </div>
    </div>
  </div>
</div>

我查看了以上的示例，它存在同样的问题。在重新加载时，请清除缓存。

- Zword

---

请您创建一个 jsfiddle 示例以说明这个问题。 - Stanislav Kvitash

你能否尝试通过https://tools.pingdom.com运行您的网站并截取“文件请求”瀑布流的屏幕截图。由于您正在使用lazyload，如果有一个文件需要很长时间才能加载，则可能会阻塞图像的渲染。 - Colin Gell

还有一件事情会拖慢图像的加载速度，那就是有很多超过72ppi并且没有调整大小的图像！ - Colin Gell

我已经解决了这个问题。所以问题出在angularjs中，src是稍后设置的。当我检查其他网站时，发现他们在需要懒加载图片时将img标签添加到DOM中。所以我也采用了同样的方式，并且现在它正在工作。但我仍然想知道iOS如何渲染图像。它是否进行任何渲染优化？这在一个包含大量图片列表的页面上发生，而其他页面正常运行。 - Zword

我遇到了非常类似的问题，我认为这是 iOS 11 中的一个 bug。 - Stradosphere

Answer 1

iOS11 似乎又回到了黑客攻击的时代。过去我们需要使用像 -webkit 这样的黑客技巧，但现在我们需要再次使用它，而且是无需前缀的...

img {
    transform: rotateZ(360deg);
}

- OZZIE

Answer 2

显然有一个已知的问题，据信与Safari假定晦涩的等宽方块字符有关，一旦字体加载完成，它会超时你的JavaScript，包括你的lazyload脚本。

解决方法是包含一个常见的备用字体，例如：

font-family: "Your strange font", Arial, Sans-Serif;

或许可以使用谷歌字体

但愿IOS11系统很快就能得到修补!!!

欲了解更多信息，请查看此链接：https://bugs.webkit.org/show_bug.cgi?id=174031

- Colin Gell

---

我已添加了一个示例。我没有使用任何字体，但问题仍然存在。 - Zword

这似乎与OP的问题无关。 - sandstrom