Question

我真的不知道为什么会这样，我真的希望有人之前有这个问题！我目前的问题是我正在运行一个大约的电子商务网站。 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进行模板化。在我看来，这是一个图像错误，而不是代码问题。

任何帮助表示赞赏：）

Answer 1

发生了什么事情，Safari正在耗尽内存。这可能会导致奇怪的工件，或者页面完全崩溃，只留下应用程序的shell。

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

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

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

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

＆＃13;

function getPeople(height, weight) {
  let [0: weightGte, 1: weightLte ] = weight;
  return {
    family {
        people(height, weightGte, weightLte) {
            givenName
            surName
            age
        }
    }
  }
}

＆＃13;

const commonUseCase = getPeople(192, [65, 100]);

//elsewhere in your code

query(commonCase).then(...

＆＃13;

    $(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");     
        });
    });

＆＃13;

Answer 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;

就是这样！：）

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

2 个答案: