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

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[herrernst]

Attachment: 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"

Comment 1

[Robert Longson [:longsonr]]

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.

Comment 2

[herrernst]

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.