Search code examples
wordpressimagemobilepng

PNG Images crashing on iPhone and other mobile devices

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 :)

enter image description here enter image description here

Solution

  • 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! :)