IMG with mix-blend-mode disappears unless wrapped
Categories
(Core :: Web Painting, defect)
Tracking
()
People
(Reporter: marcus.s.crowley, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36
Steps to reproduce:
I have a photo by itself in a web page. The BODY of the page is set to red (background-color: red). The IMG has a CSS rule (mix-blend-mode: overlay).
Actual results:
In Firefox 65.0.2 on Windows 10, the photo isn't displayed at all.
Expected results:
In Chrome - the photo is composited as expected.
In Edge - which doesn't currently support mix-blend-mode - the image is displayed without compositing.
According to caniuse.com, Firefox should behave like Chrome.
Reporter | ||
Updated•6 years ago
|
Reporter | ||
Comment 1•6 years ago
|
||
Sorry - a correction. In Chrome (as you can see in CodePen), the photo isn't composited either (same as Edge), although it probably should be.
Comment 2•6 years ago
|
||
Managed to reproduce this issue on Windows 10/7, ubuntu 16.04 and mac OS, on Nightly 67.0a1 (2019-03-10), Firefox 66.0b14, Firefox 65.0.2 and Firefox 60.5.2esr.
Comment 3•6 years ago
|
||
Is this a regression?
Comment 4•6 years ago
|
||
I believe this is the expected rendering.
mix-blend:overlay with the backdrop as rgb(255,0,0) should be rendering just the backdrop color I believe.
The difference with 'wrapper' is that it's rgb(0,128,0) (not 255 for the green channel), so some darkening can occur and you can see the image.
The difference between Firefox and Chrome appears to be whether the <body> background color is considered part of the backdrop for elements in the page. My interpretation of the spec [1] is that the Firefox behaviour is correct.
Comment 5•6 years ago
|
||
I've tried to find the regression window, without success. The actual behavior is the same in Firefox 51, where I've stopped the bisection.
Seems like it might be worth filing a Chromium bug, to help things move towards interoperability.
Reporter | ||
Comment 7•6 years ago
|
||
(In reply to Matt Woodrow (:mattwoodrow) from comment #4)
Ah! Interesting response. You're right: even in Photoshop, Steve Francis disappears on a red background if Overlay is the selected blending mode. It's not what I'd expected!
I believe this is the expected rendering.
mix-blend:overlay with the backdrop as rgb(255,0,0) should be rendering just the backdrop color I believe.
The difference with 'wrapper' is that it's rgb(0,128,0) (not 255 for the green channel), so some darkening can occur and you can see the image.
The difference between Firefox and Chrome appears to be whether the <body> background color is considered part of the backdrop for elements in the page. My interpretation of the spec [1] is that the Firefox behaviour is correct.
Comment 8•6 years ago
|
||
Looks they've had this on file for a few years already: https://bugs.chromium.org/p/chromium/issues/detail?id=711955
Updated•6 years ago
|
Updated•6 years ago
|
Description
•