1380719 - CSS SVG masked background color or SVG filtered background image shows through element overlaid on top

Status: RESOLVED INVALID

(Core :: SVG, defect, P3)

Description

[buovjaga]

Attachment: Testcase for CSS mask with html and svg

1. Download and unpack testcase, open the html
2. Click the Language menu button

Notice how the appearing menu hides the text elements below it, but the masked background colors show through.

Found on Manjaro Linux, FF 54.0.1 (64-bit)

Confirmed to exist in Nightly with Flatpak, FF 56.0a1 (2017-07-13) (64-bit)

Comment 1

[buovjaga]

Attachment: Screenshot of the bad rendering

Comment 2

[buovjaga]

Same result observed while referencing SVG filters (feColorMatrix) like so:
background-image: url(libo-symbol-white.svg);
filter: url('libo-symbol-white.svg#calc');

Comment 3

[buovjaga]

Attachment: Testcase for SVG filter

To check my sanity, I confirmed that this does not happen with the SVG as simply background-image. The filter triggers the bug.

Comment 4

[Robert Longson [:longsonr]]

Attachment: libo-symbol.svg

Comment 5

[Robert Longson [:longsonr]]

Attachment: reporter's testcase

Comment 6

[Robert Longson [:longsonr]]

I see no difference between Firefox's rendering and Chrome's rendering.