iOS11图像渲染问题

Posted

技术标签:

【中文标题】iOS11图像渲染问题【英文标题】:iOS11 image rendering issues 【发布时间】:2018-04-04 09:03:46 【问题描述】:

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

我尝试过的事情:-

    transform3d 以使用 GPU 渲染。使用不透明度,will-change 也一样。 通过JS给元素添加一些样式来触发重排/重绘

一个疑问:它是否与 PPI(每英寸像素)有关。目前它的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- elem- load-offset-top="860"></ng-lazy-load-img>
      </div>
    </div>
  </div>
</div>

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

【问题讨论】:

你能设置一个 jsfiddle 来说明这个问题吗? 你能不能也加一些代码,至少是img标签周围的元素 您能否尝试通过:tools.pingdom.com 运行您的网站并截取“文件请求”瀑布的屏幕截图。当您使用延迟加载时,如果有一个文件需要很长时间才能加载,它可能会阻止图像的渲染。 还有一件事会减慢图像的加载速度,那就是有很多超过 72ppi 且未调整大小的图像!!! 我有一个非常相似的问题,我认为这是 iOS 11 中的一个错误。 【参考方案1】:

显然,有一个已知问题被认为与 Safari 相关,它假定模糊的单宽方形字符,一旦加载字体,它就会超时你的 javascript,包括你的延迟加载脚本。

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

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

或者也许使用谷歌字体

希望IOS11系统尽快打补丁!!!

欲了解更多信息,请参阅此链接:https://bugs.webkit.org/show_bug.cgi?id=174031

【讨论】:

我添加了一个小提琴示例。我没有使用任何字体,但仍然是同样的问题 这似乎与 OP 问题无关。【参考方案2】:

iOS11 似乎又回到了黑客攻击。过去我们需要像 -webkit 这样的 hack,但现在我们再次需要它,但没有前缀......

img 
    transform: rotateZ(360deg);

【讨论】:

以上是关于iOS11图像渲染问题的主要内容,如果未能解决你的问题,请参考以下文章

iOS 预渲染加速图像显示

iOS 模拟器使用模板渲染模式在透明图像上显示白色背景

iOS 图像渲染原理

利用预渲染加速iOS设备的图像显示

iOS中视图变换旋转使图像渲染效果无效

iOS 事件处理机制与图像渲染过程