CSS mix-blend-mode and clip-path don't work when combined (on HTML element)

VERIFIED FIXED in Firefox 52

Status

()

defect
VERIFIED FIXED
3 years ago
3 years ago

People

(Reporter: jonnyscholes, Assigned: u459114)

Tracking

(Blocks 1 bug)

50 Branch
mozilla52
x86
macOS
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox52 fixed)

Details

Attachments

(2 attachments)

Reporter

Description

3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160606004039

Steps to reproduce:

Create two divs - foreground and background. Place foreground absolutely over background. Apply clip-path: url(#svgPath); OR cli-path: polygon; (with clip-path-shapes enabled). Apply mix-blend-mode - all values other than normal. Example: http://codepen.io/jonnyscholes/pen/7fb31dcb927689f551bfbbac794c0285


Actual results:

Foreground clips to an unexpected square that seems to flicker every few seconds.


Expected results:

Forground should be clipped as per the clip mask then the remaining shape should blend with the background as set by mix-bledn-mode.
Hi,

I tested this issue on Mac OS X 10.11 with FF Nightly 50.0a1 (2016-06-12) and I can reproduce it.
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
OS: Unspecified → Mac OS X
Product: Firefox → Core
Hardware: Unspecified → x86
Version: 48 Branch → 50 Branch
Assignee

Updated

3 years ago
QA Contact: cku
Assignee

Updated

3 years ago
QA Contact: cku
Assignee

Updated

3 years ago
Assignee: nobody → cku
Assignee

Updated

3 years ago
See Also: → 1042296
Assignee

Updated

3 years ago
Blocks: svg-enhance
Comment hidden (mozreview-request)
Assignee

Updated

3 years ago
See Also: 1042296
Assignee

Comment 7

3 years ago
In nsIFrame::BuildDisplayListForStackingContext, nsDisplayBlendMode is already been created to handle mix-blend-mode, so we don't need to take care of it again in nsDisplayMask and nsDisplayFilter I thought.
Assignee

Updated

3 years ago
Attachment #8796027 - Flags: review?(mstange)
Attachment #8796028 - Flags: review?(mstange)

Comment 8

3 years ago
mozreview-review
Comment on attachment 8796027 [details]
Bug 1279409 - Part 1. Remove mix-blend-mode handling code in nsSVGIntegrationUtils.

https://reviewboard.mozilla.org/r/82024/#review80634
Attachment #8796027 - Flags: review?(mstange) → review+

Comment 9

3 years ago
mozreview-review
Comment on attachment 8796028 [details]
Bug 1279409 - Part 2. Reftest for clip-path with mix-blend-mode.

https://reviewboard.mozilla.org/r/82026/#review80636
Attachment #8796028 - Flags: review?(mstange) → review+
Assignee

Comment 12

3 years ago
https://hg.mozilla.org/integration/mozilla-inbound/rev/d48849ef2b8f964e4b68c6bbe82279709aab9c13
Bug 1279409 - Part 1. Remove mix-blend-mode handling code in nsSVGIntegrationUtils.

https://hg.mozilla.org/integration/mozilla-inbound/rev/c5b5b2bbba91bde8e3b4f9dee0a5cc653f0e0062
Bug 1279409 - Part 2. Reftest for clip-path with mix-blend-mode.

Comment 13

3 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/d48849ef2b8f
https://hg.mozilla.org/mozilla-central/rev/c5b5b2bbba91
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla52
The link rel="match" in the reftest has an incorrect filename (it's missing the "1-").

(I found this with the script layout/reftests/w3c-css/submitted/check-for-references.sh .)
Flags: needinfo?(cku)
Assignee

Comment 16

3 years ago
fixed
Flags: needinfo?(cku)
Tested on Mac OS X 10.10 with FF Nightly 52.0a1(2016-10-03) and I can't reproduce it.
Status: RESOLVED → VERIFIED
Reporter

Comment 19

3 years ago
Tested on Mac OSX 10.11.6 with FF Nightly 52.0a1 (2016-10-04) (64-bit) - everything now looking good. Thanks a million - you all rock!
You need to log in before you can comment on or make changes to this bug.