We have been made aware of a perplexing issue with Galleria versions 1.5 and below where product images can sometimes become distorted as you scroll through collection pages, related products, or anywhere a product grid exists on the page. This only happens on mobile (specifically iPhones and possibly iPads) using certain versions of iOS. It also is an intermittent issue that doesn't seem to happen all the time, which has made it quite difficult for us to troubleshoot. Images might look something like those in the screenshot below after scrolling around in the site for a while on one of these devices:
After much troubleshooting, we have discovered that the issue is related to a third-party lazy loading plugin (a plugin which only loads images as they are needed in the viewport to improve load times). If you are experiencing these issues, please follow these steps to fix it:
- Login to your Shopify dashboard
- Go to Online Store > Themes > Galleria
- Click the Actions button and then Edit Code
- Navigate to the Snippets folder and open the file called product-loop.liquid
- Look for the code below (it is around line 38 in the default, unedited theme):
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="lazyload product-thumb-img blur-up" src="{{ product.featured_image | img_url: '300x' }}" data-original="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ product.featured_image.aspect_ratio }}" data-sizes="auto" alt="{{ product.featured_image.alt | escape }}" style="max-width: {{max_img_width}}" >
Replace that code with:
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="product-thumb-img lazyloaded" src="{{ product.featured_image | img_url: '600x' }}" {% comment %} data-original="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ product.featured_image.aspect_ratio }}" data-sizes="auto" {% endcomment %} alt="{{ product.featured_image.alt | escape }}" style="max-width: {{max_img_width}}" >
Save the file, and the issue should disappear. The lazy loading plugin we use has been updated in version 2.0+ of Galleria. We sincerely apologize for the inconvenience.
Comments
0 comments
Article is closed for comments.