SVG referenced from sprite disappears on CSS transform applied with element selector

RESOLVED INVALID

Status

()

RESOLVED INVALID
2 years ago
2 years ago

People

(Reporter: herr.ernst, Unassigned)

Tracking

48 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8783554 [details]
firefox-svg-test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7

Steps to reproduce:

Apply "transform:scaleY(-1)" on <svg> to vertically flip it


Actual results:

SVG not visible anymore


Expected results:

It is displayed flipped
It works if the CSS selector doesn't target "svg", but "svg.someclass"

Updated

2 years ago
Status: UNCONFIRMED → NEW
Component: Untriaged → SVG
Ever confirmed: true
Product: Firefox → Core
https://www.w3.org/TR/SVG/struct.html#UseElement

The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’.

So there's 2 svg elements.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

2 years ago
Thanks. Okay, I understand, it works when using the immediate child selector ("> svg"). But I still don't understand why nothing is displayed at all. If the <symbol> is replaced by <svg>, then there are two <svg> in the tree, so my guts would suspect they would flip twice and be displayed like without transform.

Also to mention, other browsers (Chrome, Safari) don't exhibit this behaviour, they apply the transform once.
You need to log in before you can comment on or make changes to this bug.