Closed Bug 1083241 Opened 5 years ago Closed 5 years ago

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

Categories

(Core :: Layout, defect)

35 Branch
x86_64
Windows 8.1
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla36
Tracking Status
firefox34 --- unaffected
firefox35 + fixed
firefox36 + fixed

People

(Reporter: rosca, Assigned: mvujovic)

References

()

Details

(Keywords: regression)

Attachments

(3 files)

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.
See Also: → 1083245
Assignee: nobody → mvujovic
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=4b3d816c21fd&tochange=0ed32d9a42d6
Blocks: 1057180
Component: Untriaged → Layout
Keywords: regression
Product: Firefox → Core
Version: 36 Branch → 35 Branch
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.
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
I'm working on a fix and tests for this. I should be able to post something tomorrow.
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Attached patch PatchSplinter Review
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
Attachment #8506291 - Flags: review?(roc)
https://hg.mozilla.org/mozilla-central/rev/f1ecd7a2f170
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla36
Looks like we might need an aurora uplift here - can you confirm?
Flags: needinfo?(mvujovic)
(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.
Flags: needinfo?(mvujovic)
You should request approval-mozilla-aurora? on the patch, and fill in the answers to the questions it adds to the comments field.
Flags: needinfo?(mvujovic)
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.
Flags: needinfo?(mvujovic)
Attachment #8506291 - Flags: approval-mozilla-aurora?
Attachment #8506291 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
(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?
You need to log in before you can comment on or make changes to this bug.