New issue
Advanced search Search tips

Issue 711955 link

Starred by 11 users
Status: Assigned
Owner:
schenney@chromium.org
Cc:
bokan@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Chrome
Pri: 2
Type: Bug-Regression

Blocking:
issue 825565



Sign in to add a comment

mix-blend-mode for img element not blending with body background color

Reported by simon.se...@gmail.com, Apr 15 2017 
UserAgent: Mozilla/5.0 (X11; CrOS armv7l 9202.60.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.137 Safari/537.36
Platform: 9202.60.0 (Official Build) stable-channel daisy

Example URL:
https://codepen.io/anon/pen/XRJLZy

Steps to reproduce the problem:
1. Use mix-blend-mode for an img element
2. Set a background color to the body with css
3. (https://codepen.io/anon/pen/XRJLZy)

What is the expected behavior?
The image is blended with the background.

What went wrong?
The image isn't blended with the background.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes Chrome 56 (Stable)

Does this work in other browsers? Yes

Chrome version: 57.0.2987.137  Channel: stable
OS Version: 9202.60.0
Flash Version: Shockwave Flash 25.0 r0

This is cross-platform. (Tested on Chrome OS, Windows 10, Mac OS X, and Android -- same behavior on all platforms, things stopped working with Chrome 57.) 

Workaround: set background color for both body and html with css.
expected_result.png
46.4 KB View Download
chrome_57_stable_result.png
96.0 KB View Download

Comment 1 by simon.se...@gmail.com, Apr 16 2017 

(This issue isn't limited to img elements.)

Here's the exact example from the specification: https://codepen.io/anon/pen/dWoNjb
https://www.w3.org/TR/compositing-1/#mix-blend-mode

The workaround is simple enough, but breaking existing designs is pretty bad, e.g. the following demo: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

You should consider adding a regression test for the future.

Comment 2 by bokan@chromium.org, Apr 19 2017

Cc: bokan@chromium.org
Components: -Blink Blink>Paint
A little hard to say where this belongs but Paint team will know.

Comment 3 by schenney@chromium.org, Apr 20 2017

Labels: -Type-Bug BugSource-User RegressedIn-57 PaintTeamTriaged-20170420 RegressionFound-57 Type-Bug-Regression
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
I need to look into the effects of quirks mode on this, and the spec.

It is definitely the case that in quirks mode the html element renders the body background if the html does not have it's own background, or something like that, though I can't find the info right now.

Comment 4 by simon.se...@gmail.com, Apr 21 2017 

The issue seems to be that mix-blend-mode has stopped working when the background of either the body or the html element is transparent (the initial value if not specifying a background, or, e.g., "background: transparent" or "rgba(255, 0, 0, 0.003)").

Comment 5 by till.ste...@gmail.com, Jun 22 2017 

Bug still exists in V59

Comment 7 by f...@opera.com, Mar 26 2018

Blocking: 825565

Comment 8 by foolip@chromium.org, Sep 28

Labels: Hotlist-Interop
I've tested https://codepen.io/anon/pen/dWoNjb in Chrome, Edge, Firefox and Safari. Firefox and Safari blend the yellow duck into a green duck, Chrome and Edge do not. Adding Hotlist-Interop to track this.

Comment 9 by simon.se...@gmail.com, Sep 28 

mix-blend-mode hasn't even been implemented for Edge. Only Chrome (and Chromium based browsers I guess) with a broken implementation. The workaround still works, but it would be nice if you fixed this regression bug. (All the examples linked here: https://caniuse.com/#search=mix-blend-mode have been broken i Chrome for one and a half year now.)
►

Sign in to add a comment