iOS11图像渲染问题

Question

在iOS11的iPhone设备上,我遇到渲染图像的问题.我正在做的是在滚动上延迟加载图像列表,但是随机地某些图像无法呈现.我已经尝试在Safari桌面上进行调试,它显示img标签确实设置了src但是它仍然不会渲染,直到我做一些操作打开任何完全覆盖该区域的层.

我尝试过的事情: -

1. transform3d使用GPU渲染.使用不透明度,也将改变.
2. 通过JS为元素添加一些样式以触发重排/重绘

一个疑问:它是否必须对PPI(Pixel Per Inch)做任何事情.目前其150PPI.我需要将它降低到72PPI吗？

我会给出问题实际发生的链接,但不能真的很抱歉

小提琴示例:

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>

我检查了上面的例子,它有同样的问题.在重新加载时清除缓存

Answer 1

显然，存在一个已知问题，据信与 Safari 假定模糊的单宽方形字符有关，并且一旦加载字体，它就会使您的 javascript 超时，包括您的延迟加载脚本。

解决方法是包含一种常见的后备字体，即

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

或者也许使用谷歌字体

希望IOS11系统能尽快修复！！！

有关更多信息，请参阅此链接：https://bugs.webkit.org/show_bug.cgi ?id=174031