mix-blend-mode isn't applied with CSS Animation

NEW
Unassigned

Status

()

Core
Graphics
P3
normal
a year ago
9 months ago

People

(Reporter: m_kato, Unassigned)

Tracking

55 Branch
All
Unspecified
Points:
---

Firefox Tracking Flags

(firefox-esr52 wontfix, firefox55 wontfix, firefox56 wontfix, firefox57 wontfix)

Details

(Whiteboard: [gfx-noted])

Attachments

(1 attachment)

(Reporter)

Description

a year ago
Created attachment 8884685 [details]
test.svg

When using mix-blend-mode on SVG, it works well.  But using it with CSS animation, it doesn't work.

Attached SVG works well on Chrome, but it doesn't work on Firefox 56.  I test on macOS 10.12 + Nightly 56.
Moving this to graphics because this seems to be simply a result of creating a stacking context (which CSS Animation requires). You can produce the same effect by setting 'will-change:transform' or 'isolation:isolate' on the element. That said, I'm not sure how this is supposed to work.
Component: DOM: Animation → Graphics
Not that familiar with reading SVG, but the transform and mix-blend appear to be on the same element?

Is it possible that we're treating the transform as 'outside' the blend, and Chrome is the opposite?
I can reproduce it on all platforms.

Brian, do you have any thought in this?
Has STR: --- → yes
Hardware: Unspecified → All
No, I'm not familiar with that spec.
Hello Markus, do you have any thought about this bug? Or could you forward this to someone who might familiar with this part of code?
Flags: needinfo?(mstange)
I think Brian is right, and this bug happens because we always treat transforms as stacking contexts, or "effect groups" (i.e. implied intermediate surfaces). But in SVG, 2D transforms should not be stacking contexts - blending should happen across transforms.
I don't think there's a way for us to fix this with the current layers architecture. At least not complicated rewrapping of display items or leaf layers, and duplicating transform chains.

(In reply to Matt Woodrow (:mattwoodrow) from comment #2)
> Not that familiar with reading SVG, but the transform and mix-blend appear
> to be on the same element?

The transform is on the <use> element, and the mix-blend-mode is on the <ellipse> *inside* the <use>.
Flags: needinfo?(mstange)
status-firefox55: --- → wontfix
status-firefox56: --- → wontfix
status-firefox57: --- → wontfix
status-firefox-esr52: --- → wontfix
Priority: -- → P3
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.