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

NEW
Unassigned

Status

()

Core
SVG
P3
minor
10 months ago
9 months ago

People

(Reporter: buovjaga, Unassigned)

Tracking

54 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(firefox57 wontfix)

Details

Attachments

(3 attachments)

(Reporter)

Description

10 months ago
Created attachment 8886250 [details]
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)
(Reporter)

Comment 1

10 months ago
Created attachment 8886495 [details]
Screenshot of the bad rendering
(Reporter)

Comment 2

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

Updated

10 months ago
Attachment #8886250 - Attachment description: Testcase with html and svg → Testcase for CSS mask with html and svg
(Reporter)

Comment 3

10 months ago
Created attachment 8886841 [details]
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.
(Reporter)

Updated

10 months ago
Summary: CSS masked background color shows through element overlaid on top → CSS SVG masked background color or SVG filtered background image shows through element overlaid on top

Updated

9 months ago
Component: Layout: View Rendering → SVG

Updated

9 months ago
Priority: -- → P3

Updated

9 months ago
status-firefox57: --- → wontfix
You need to log in before you can comment on or make changes to this bug.