iOS11的iPhone设备在渲染图像时存在问题。我的做法是在滚动时懒加载图像列表,但是随机地有些图像无法渲染出来。我已经尝试使用Safari桌面版进行调试,它显示img标签确实已经设置了src属性,但仍然不会渲染,直到我执行打开完全覆盖该区域的任何层的操作。
我尝试过的事情:
- 使用transform3d进行GPU渲染。同时使用opacity和will-change。
- 通过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>
我查看了以上的示例,它存在同样的问题。在重新加载时,请清除缓存。