Vue-storefront: mix-blend-mode breaks images on Chrome mobile

[bobcho]

Current behavior

There seems to be an issue with mix-blend-mode css property on latest Chrome / latest Android 9. Attached is how the demo looks on up-to-date Pixel 3.

Expected behavior

Products & categories Images should be displayed properly and be visible.

Steps to reproduce the issue

Browse https://demo.vuestorefront.io/ with Chrome on Android 9, preferably on a Pixel phone.

Repository

https://demo.vuestorefront.io/

Can you handle fixing this bug by yourself?

• [ ] YES
• [X] NO

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.
• [ ] 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.
• [X] 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 73.0.3683.90
• OS: Android 9 Pie
• Node:
• Code Version:

Additional information

[pkarw]

I believe this one has been fixed in the branch release/1.9

[bobcho]

Do you mind linking the commit that fixed it? I'd appreciate it

[haelbichalex]

I don't think this is fixed as it still appears on my Oneplus 6 using Android 9 & Chrome 74 and should be reopened.

Can be fixed I think by adding will-change: opacity; to the images according to this answer on stackoverflow.

[patzick]

Thanks guys for reporting. I'm reopening this and we will fix that in upcoming RC version.
If any of you would like to provide PR please create branch from release/v1.10 branch and create PR back into :)

[michasik]

It works properly on https://next.storefrontcloud.io/ and I assume that commit below fixes the issue with displaying the images incorrectly:
https://github.com/DivanteLtd/vue-storefront/commit/4c6966de8f33d1ab0850dd7388725923256e4cf0

[thirdspace]

I'm still experiencing issues with mix-blend-mode breaking on my Galaxy S9. Working on desktop chrome (Mac/Win) and Chrome for iPhone, but for Android Chrome alone this breaks for me. Trying to find alternatives on my side but I think this is related.

[pkarw]

Hi @thirdspace are you testing it on the release/1.10 or develop branches? @patzick can you take a lookt at it?

[thirdspace]

Thanks for the quick reply! I'm testing on Chrome 75.0.3770.101 as well as Chrome Dev 77.0.3828.0. Experiencing the same issue on both.

You can view the sample page I've put together at http://stephenpeaslee.com/lex-tints/. Mix-blend-mode should show color tints over the images but they are displaying as black and white on Android.

[patzick]

@thirdspace do you have this problem in current RC env?
Please check it here: https://next.storefrontcloud.io/

cc @michasik

[thirdspace]

Within this environment, the CSS treatment I'm aiming for does indeed work
without any issues. Screenshot attached.

On Mon, Jul 1, 2019, 12:39 AM Patryk Tomczyk [e-mail]
wrote:

@thirdspace https://github.com/thirdspace do you have this problem in
current RC env?
Please check it here: https://next.storefrontcloud.io/

cc @michasik https://github.com/michasik

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DivanteLtd/vue-storefront/issues/2667?email_source=notifications&email_token=AAYVGODLZHDQGGZFNFPA323P5GYEHA5CNFSM4HCH72Q2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODY5IR3I#issuecomment-507152621,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAYVGOAS7ZHHVCYNKM5VCY3P5GYEHANCNFSM4HCH72QQ
.

[tripti1410]

I am still facing this issue in chrome 76, one plus 6 phone and in Redmi POKO. Here is the website link: https://ecstatic-ardinghelli-6c0827.netlify.com/
It is a nuxt app.