Question

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

我尝试的事情： -

transform3d使用GPU渲染。使用不透明度，也会改变。
通过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包含你的lazyload脚本。

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

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

或者可能使用google-fonts

希望IOS11系统尽快修补!!!

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

Answer 2

它似乎又回到了iOS11的黑客体系。过去，我们需要使用Items Page这样的骇客，但现在我们再次需要它，但没有前缀...

-webkit

iOS11图像渲染问题

2 个答案: