PNG图像在iPhone和其他移动设备上崩溃答案

【问题标题】：PNG Images crashing on iPhone and other mobile devicesPNG图像在iPhone和其他移动设备上崩溃
【发布时间】：2018-02-23 21:46:47
【问题描述】：

我真的不知道为什么会这样，我真的希望以前有人遇到过这个问题！我目前的问题是我正在运行一个电子商务网站。 2500 种产品。所有产品图片均为 PNG 格式，因为必须是透明的（设计要求）。在桌面上一切正常，在移动设备上图像开始崩溃，或者你会怎么称呼它。图像被已加载的图像替换，有时它们会反转颜色。

所有图片均为 RGB / PNG-24（尺寸：732 x 732 像素）。

我在相关情况下使用的代码：

<img    title"{{ product.name }}"
        alt="{{ product.name }}"
        itemprop="contentUrl"
        class="product-img"
        src="{{ product.thumbnail.src }}"
        srcset="{{ product.thumbnail.src|resize(250, 250)|retina(1) }} 1x,
        {{ product.thumbnail.src|resize(250, 250)|retina(2) }} 2x,
        {{ product.thumbnail.src|resize(250, 250)|retina(3) }} 3x,
        {{ product.thumbnail.src|resize(250, 250)|retina(4) }} 4x" />

该商店在 Wordpress / WooCommerce 上运行，并使用 Timber Twig 作为模板。在我看来，这是图像错误而不是代码问题。

任何帮助表示赞赏:)

【问题讨论】：

基本情况是，当 Safari 内存不足时，会发生奇怪的事情。您必须加载和卸载当时视图中的任何内容来管理负载。
@TrevorD 好吧，不幸的是，我的回复有点快，经过更多测试，它也出现在 iOS 版 Chrome 上...
用pngcheck检查图片。此外，您是专门使用开箱即用的软件来创建它们，还是使用其他实用程序（例如使用 zopfli 对它们进行后处理）？
虽然我目前认为@TrevorD 是正确的，但所有 PNG 都很好，但它与 Safari 无关，它是整个设备内存不足......我只使用 out-of-the-盒子软件！
从技术上讲，iOS 上的 Chrome 是 Chrome 拖动中的 Safari。 iTunes 协议规定您必须使用 Safari 引擎 (UIWebView)。所以 iOS chrome 只是换了皮 UIWebView。这意味着它在内存方面存在所有相同的问题。我不确定这是否对您有帮助，因为您需要透明度，但奇怪的是，画布使用的内存比 img 少。因此，如果可以，您可以改用画布，并且每个都有一个钩子来加载图像并将其绘制到画布上。如果图像被缩小，这也可以节省内存。我在一个 Cordova 应用程序中做了类似的事情，该应用程序采用全分辨率图像并显示拇指

标签： wordpress image mobile png

【解决方案1】：

发生的情况是 Safari 内存不足。这可能会导致奇怪的工件，或者页面完全崩溃，只剩下应用程序的外壳。

iOS 上的所有浏览器都在内部使用 UIWebView，因此即使是 Chrome 也会显示此问题。

解决此问题的唯一方法是限制页面的加载量。尝试仅显示需要显示的图像，并隐藏用户未查看的内容。如果需要，使用分页器，或在显示之前动态调整所有图像的大小。

我之前使用的一个奇怪的技巧是将所有图像加载到画布元素中。这些通常具有较小的内存占用。 Canvas 不直接支持透明度，但您可以在彼此之上绘制东西来模拟它。

处理将所有图像更改为画布的基本方法是这样的

    $(function(){
        $("canvas").each(function(){
            var newImage = new Image();
            var self=this;
            var ctx = self.getContext("2d");          
            newImage.onload = function () {
               var orgWidth = newImage.naturalWidth;
               var orgHeight = newImage.naturalHeight;
               ctx.drawImage(newImage, 0, 0, orgWidth, orgHeight, 0, 0, self.width, self.height);
            };   
            newImage.src = $(self).data("url");     
        });
    });

canvas{
  width:100%;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas data-url="https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></canvas>

【讨论】：

【解决方案2】：

显然这只手与任何图像格式或类似格式无关。在寻找另一个问题时，我发现了这篇关于“iOS6 html 硬件加速更改以及如何修复它们”的博文。

http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

相当老了，但在 iOS 11 上仍然存在问题。我正在使用滤镜，所以在我的图像上设置阴影。一切正常，但不是在 iPhone 上。所以我添加了以下几行：

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

就是这样！ :)

【讨论】：