PNG Images crashing on iPhone and other mobile devices - wordpress

Question

I really have no idea why this is happening and I really hope someone had this issue before! My current problem is I'm running an ecommerce website with approx. 2500 products. All product images are in PNG format because the must be transparent (Design-Requirement). On Desktop everything works fine, going on mobile the Images start crashing or however you would call that. Images are being replaced by already loaded ones and sometimes they reverse colors.
All images are in RGB / PNG-24 (Size: 732 x 732 px).
The code I'm using in case of relevance:
<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" />
The shop runs on Wordpress / WooCommerce and uses Timber Twig for templating. In my opinion this is an image error not a code problem.
Any help appreciated :)

Answer 1

What's happening is Safari is running out of memory. This can result in strange artifacts, or the page crashing entirely, leaving only a shell of the app remaining.
All browsers on iOS use UIWebView internally, so even Chrome will show this issue.
The only way to solve this is to limit how much you load to the page. Try to only show images that need to be shown, and hide what the user isn't looking at. Use a pager if needed, or dynamically resize all images before displaying them.
A weird trick I have used previously is to load all images to canvas elements instead. These typically have a smaller memory footprint. Canvas does not support transparency directly but you can draw things on top of each other to simulate it.
A basic way to handle changing all images to canvas is like this
$(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>

Answer 2

Obviously this hand nothing todo with any image format or similar.. While surfing for another problem I found this Blogpost about "iOS6 html hardware acceleration changes and how to fix them".
http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
Pretty old, but still a problem on iOS 11. I am using filter so set a shadow on my image. All was working but not on the iPhone. So I added following lines:
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
That's it! :)