In my online shop i found that on some android devices (Samsung A52 – Android 13 and others) there is a pink line on the right side of some images. This applies to jpg and png. I suspected that its a Problem with the theme or some Apps. But when I open the image in a new tab, the pink bar is still there.
To rule out the Theme I created a clean version of the theme, without any custom code or app. I uploaded the Image to the theme and it showed up correctly. Then I’ve put the Shopify cdn Link from the Image with the pink onto the new site. There it showed the pink stripe. Now I could reupload all Images, but only having one phone to check if an image is flawed and with over 300 affected images this would be a ton of work.
Did someone experience something similar? I’ve seen the pink bar on other shops created with shopify, so it shouldn’t be a problem specific with me. Has anyone any Idea on how to fix this easier than spending a whole week replacing the flawed images one-by-one?
2
Answers
I had the problem and drove me crazy, I found out that converting the .png to webp (which is good to do anyway), the pink bar are gone !
We also have a Shopify store and our logo plus other images are also showing the pink strip. The problem was first observed at the end of March and I’ve been battling with the Shopify support team to get an answer ever since.
What I do know is that the problem is on Chrome bowsers on mobile devices running Android, so desktop and Apple aren’t an issue. The problem occurs when the Shopify CDN resizes the original image so that it is a smaller size and loads quickly. However in doing so it may cause the pink strip to appear on the right of the image, but only if it is a transparent PNG and has something that isn’t just transparency in the right portion of the image.
The problem also appears to be limited to images that are rendered at full size or close to full size. If an image is scaled at double size to make use of higher pixel density on mobile devices then Chrome will render correctly, but if it is resized at normal size then it will render with pink.
I think the issue is with the Shopify CDN, my guess is about 4 weeks back they put live some changes that used more recent features in the PNG standard with the aim of reducing file size, but inadvertently introduced the problem, though it could be with the way Chrome is rendering the images. Only Shopify or Chrome are going to know the answer to that and I’ve got tickets out with both.
As a work around either don’t use PNG or change the srcset details in the liquid to include x1 and x2 versions of the image for the browser to choose.