1083241 - mix-blend-mode and CSS filters don't work well together.

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Ion Rosca]

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36

Steps to reproduce:

Open http://codepen.io/rosca/full/chEmL.
Check Blending.
Check any filter (speia and/or blur).


Actual results:

Most of the elements having mix-blend-mode set got hidden.


Expected results:

I want to see the elements when I apply filters, with small color changes, caused by the filters.

Comment 1

[Loic]

http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=4b3d816c21fd&tochange=0ed32d9a42d6

Comment 2

[Max Vujovic]

Attachment: mix-blend-mode + SVG filters bug

FYI, this bug isn't specific to CSS Filters. It occurs between mix-blend-mode and all filters, including SVG filters (which we've been shipping for a long time).

See attachment for SVG filter repro.

Comment 3

[Max Vujovic]

Attachment: mix-blend-mode + SVG filters workaround

One interesting workaround is setting a non-one opacity on the layer with filters and blend modes (e.g. opacity: 0.9999). See attachment.

One difference I see in the code is a gfx->Paint() call only when opacity != 1:
http://dxr.mozilla.org/mozilla-central/source/layout/svg/nsSVGIntegrationUtils.cpp#589

Comment 4

[Max Vujovic]

I'm working on a fix and tests for this. I should be able to post something tomorrow.

Comment 5

[Max Vujovic]

Attachment: Patch

In PaintFrameWithEffects, we push a group for complex effects like opacity, masking, and blending [1]. Later in the function, we paint for those effects, except blending. This patch also paints for blending.

[1]: http://dxr.mozilla.org/mozilla-central/source/layout/svg/nsSVGIntegrationUtils.cpp#519

Comment 6

[Max Vujovic]

Comment on attachment 8506291 [details] [diff] [review]
Patch

https://hg.mozilla.org/integration/mozilla-inbound/rev/f1ecd7a2f170
https://tbpl.mozilla.org/?tree=Try&rev=1cc40d5ef3ce

Comment 7

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/f1ecd7a2f170

Comment 8

[Lukas Blakk [:lsblakk] use ?needinfo]

Looks like we might need an aurora uplift here - can you confirm?

Comment 9

[Max Vujovic]

(In reply to Lukas Blakk [:lsblakk] use ?needinfo from comment #8)
> Looks like we might need an aurora uplift here - can you confirm?

Yes, I recommend it. That'll ensure when CSS Filters launches in Firefox 35, it'll also work with CSS Blending, which has been around since Firefox 32.

Note that this also fixes SVG Filters + CSS Blending. That combination has been available but broken since Firefox 32.

Comment 10

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

You should request approval-mozilla-aurora? on the patch, and fill in the answers to the questions it adds to the comments field.

Comment 11

[Max Vujovic]

Comment on attachment 8506291 [details] [diff] [review]
Patch

Approval Request Comment

[Feature/regressing bug #]: N/A

[User impact if declined]:
Elements with non-default values for the CSS filter property and CSS mix-blend-mode property will not render on webpages. There are probably not too many cases in the wild yet because mix-blend-mode was only shipped in Firefox 32.

[Describe test coverage new/current, TBPL]:
Two reftests were added, one for HTML content + CSS filters + CSS blending, one for SVG content + SVG filters + CSS blending. Existing CSS blending and CSS filters tests pass.

[Risks and why]:
Low risk. Fix should only affect elements with mix-blend-mode defined. CSS blending is still a very new feature with likely low usage.

[String/UUID change made/needed]: None.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/1d9623f1fdee

Comment 13

[maykelesser]

I get a solution. I wrote about this on: https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546

Comment 14

[Rik Cabanier]

(In reply to maykelesser from comment #13)
> I get a solution. I wrote about this on:
> https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-
> 6b3548e9e546

Max fixed this problem last year. What will your fix do? Do you have an example that you can attach to this bug?