Closed Bug 1083241 Opened 5 years ago Closed 5 years ago
mix-blend-mode and CSS filters don't work well together
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.
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.
In PaintFrameWithEffects, we push a group for complex effects like opacity, masking, and blending . Later in the function, we paint for those effects, except blending. This patch also paints for blending. : http://dxr.mozilla.org/mozilla-central/source/layout/svg/nsSVGIntegrationUtils.cpp#519
Attachment #8506291 - Flags: review?(roc)
Attachment #8506291 - Flags: review?(roc) → review+
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
Attachment #8506291 - Flags: checkin+
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla36
Looks like we might need an aurora uplift here - can you confirm?
(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.
You should request approval-mozilla-aurora? on the patch, and fill in the answers to the questions it adds to the comments field.
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.
Attachment #8506291 - Flags: approval-mozilla-aurora?
Attachment #8506291 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
I get a solution. I wrote about this on: https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546
(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.