Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mix-blend-mode breaks images on Chrome mobile

See original GitHub issue

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. Screenshot_20190329-105305

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?

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.
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

Issue Analytics

State:
Created 4 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

1reaction

michasikcommented, Jun 17, 2019

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

1reaction

bobchocommented, Apr 2, 2019

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

Top Results From Across the Web

mix-blend-mode breaks images on Chrome mobile #2667

Current behavior There seems to be an issue with mix-blend-mode css property on latest Chrome / latest Android 9.

Mix-blend-mode doesn't work on phone browser

But when I test it on the phone (galaxy S5, UC browswer),the mix-blend-mode seems broken and displays it wrong. Please take a look...

mix-blend-mode - CSS: Cascading Style Sheets | MDN

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's ...

mix-blend-mode - CSS-Tricks

The mix-blend-mode property defines how an element's content should blend with its background. For example, the text of a could blend with ...

543583 - background-blend-mode and mix-blend-mode values

The blending mode on that computer works fine even though the Chrome version shows Version ... Observed the background-color and background-image blending.