Vue-storefront: Some images not visible on Android

[pmaojo]

Current behavior

Images are not shown.

Expected behavior

Images should display.

Steps to reproduce the issue

• Enter Chrome on Android phone (Mine is Xiaomi Mi 6).
• Open https://next.vuestorefront.io
• Look at "Everything new" section, no images, grey box.
• Open a product page.

Can you handle fixing this bug by yourself?

Right now I don't know the origin of the bug.
I could try. But maybe someone has an idea to go right to the problem!

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [ ] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [X] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser: Chrome
• OS: Android 8.1.0

[pmaojo]

Also happening when PWA is installed on Android

[alinadivante]

Hello @pmaojo
I tried reproduce this issue on Xaomi Redmi Note 4 (Android version: 7.0 NRD90M) but all images are displayed.
Please provide more details.

[RGijsberts]

We saw this once on my colleague's phone which is a OnePlus 6 (I believe), also on Chrome. I was able top inspect for a while and noticed this line of css: mix-blend-mode: multiply; on the images. Disabling this line made the images appear.
That is all the inspecting I did at that time, and right now I have only 1 Android test device with me which is a Huawei P Smart and cannot reproduce this issue.

So if anyone is able to reproduce this issue on their phone, try looking into that css

[alinadivante]

Hi @pmaojo @RGijsberts today I was trying to check this problem on 10 different mobile devices (with Android and iOS). I tested on demo and next.storefrontcloud.io, with Chrome, Firefox and Safari (also PWA installed) and.. nothing, everything looks good for me

[pmaojo]

This night I will be able to inspect with my device and try to fix it

[pmaojo]

That is it. Tested with chrome inspector running on my Android Xiaomi 6 Mi. The use of mix-blend-mode CSS property should be avoided. Thoughts:

• An ecommerce should have a guideness to upload their images, there is no need to make the trick to transform white to transparent.
• Remove mix-blend-mode and style background-color white for image placeholder would look good.
• As an starter theme using this CSS property looks like a non standard decision, and many developers will face this problem eventually, may be one of those Android failing browsers is being used by an investor.

Should this be fixed?

[pkarw]

In that case, I believe we should have this feature (cutting off the background as an option on the vs-api) level maybe? I mean: we can set the guidelines but the default Magento product set images are not compliant with it - and have just the white background :)

Maybe just some specific blend mode is not supported on the Android?
Can You help us checking the different options from:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

?

[pkarw]

This is overall strange as https://caniuse.com/#search=blend-mode shows that it should work on Chrome for Android anyway :(

[pmaojo]

https://stackoverflow.com/questions/30479321/chrome-css3-mix-blend-mode-bug-in-chrome

[pmaojo]

This fixes:

.product-image--loaded {
    transform: translateZ(0);
}

[pkarw]

Cool. Can You Please create a fix for 1.9.1?

[pmaojo]

Yes

[pmaojo]

https://github.com/DivanteLtd/vue-storefront/pull/2926