Closed Bug 1532566 Opened 4 years ago Closed 4 years ago

IMG with mix-blend-mode disappears unless wrapped

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID
Tracking Flags:
Tracking Status
firefox-esr60 --- wontfix
firefox65 --- wontfix
firefox66 --- wontfix
firefox67 --- wontfix

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.

See https://codepen.io/MSCAU/pen/ywarGV

Summary: IMG with mix-blend-mode disappears → IMG with mix-blend-mode disappears unless wrapped

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.

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.

Status: UNCONFIRMED → NEW
status-firefox65: --- → affected
status-firefox66: --- → affected
status-firefox67: --- → affected
status-firefox-esr60: --- → affected
Component: Untriaged → Layout: Images, Video, and HTML Frames
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → All
Version: 65 Branch → Trunk

Is this a regression?

Component: Layout: Images, Video, and HTML Frames → Web Painting
Keywords: regressionwindow-wanted

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.

[1] https://drafts.fxtf.org/compositing-1/#pagebackdrop

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.

Keywords: regressionwindow-wanted

Seems like it might be worth filing a Chromium bug, to help things move towards interoperability.

Flags: needinfo?(matt.woodrow)

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

[1] https://drafts.fxtf.org/compositing-1/#pagebackdrop

Looks they've had this on file for a few years already: https://bugs.chromium.org/p/chromium/issues/detail?id=711955

Flags: needinfo?(matt.woodrow)
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.