835709 - inline svg filter shared among all SVGs but visibility is controlled by the first SVG that declares it

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[payton.cartman]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:18.0) Gecko/20100101 Firefox/18.0
Build ID: 20130116073211

Steps to reproduce:

I created two inline SVG each with a filter named "MyFilter" and each sits inside a separate div. I then hide the first div by setting style="display:none" 

Here is the sample code (or jfiddle test  http://jsfiddle.net/A6gH5/):
<div style="display:none">
    <svg version="1.1" preserveAspectRatio="none" viewBox="0 0 334 191" width="400.8" height="229.2"><defs><filter id="MyFilter" x="0" y="0" width="120%" height="120%" filterUnits="objectBoundingBox"><feGaussianBlur result="blur" in="SourceAlpha" stdDeviation="2"/><feOffset result="offsetBlur" in="blur" dx="0" dy="0"/><feComponentTransfer><feFuncR type="linear" slope="0.7"/></feComponentTransfer><feMerge><feMergeNode in="offsetBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g id="filter1" filter="url(#MyFilter)"><g stroke-width="2" stroke-opacity="1" stroke="#FF0000" transform="scale(0.8333333333333334) matrix(-1,0,0,1,334,0)" fill="#ff0fff" fill-opacity="1"><rect height="187" rx="10" ry="10" width="330" x="2" y="2"/></g></g></svg></div>
<div>
<svg version="1.1" preserveAspectRatio="none" viewBox="0 0 334 191" width="400.8" height="229.2"><defs><filter id="MyFilter" x="0" y="0" width="120%" height="120%" filterUnits="objectBoundingBox"><feGaussianBlur result="blur" in="SourceAlpha" stdDeviation="2"/><feOffset result="offsetBlur" in="blur" dx="0" dy="0"/><feComponentTransfer><feFuncR type="linear" slope="0.7"/></feComponentTransfer><feMerge><feMergeNode in="offsetBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g id="filter1" filter="url(#MyFilter)"><g stroke-width="2" stroke-opacity="1" stroke="#FF0000" transform="scale(0.8333333333333334) matrix(-1,0,0,1,334,0)" fill="#ff0fff" fill-opacity="1"><rect height="187" rx="10" ry="10" width="330" x="2" y="2"/></g></g></svg>
</div>


Actual results:

the second svg will disappear too even though its div is still visible. If I rename the filter in the second svg to MyFilter2 and use that filter instead, then the second SVG will remain visible regardless of the first div's visibility.


Expected results:

I am not sure if the behavior is defined in the SVG spec. But chrome and IE 10 both show/hide each SVG using their own inline filter. Firefox seems to let SVGs share the same copy of filter declared first. And the visibility of this filter is affected by the visibility of that SVG

Comment 1

[Robert Longson [:longsonr]]

http://www.w3.org/TR/2008/REC-xml-20081126/#sec-attribute-types

Values of type ID MUST match the Name production. A name MUST NOT appear more than once in an XML document as a value of this type; i.e., ID values MUST uniquely identify the elements which bear them.

Behaviour is not defined if more than one element has the same ID.

Comment 2

[Masatoshi Kimura [:emk]]

Is it really undefined even as a part of HTML5?
Standalone SVG document cannot have multiple root (i.e. svg) elements.

Comment 3

[Robert Longson [:longsonr]]

Of course it can have multiple svg elements, that's not the issue here.

Comment 4

[payton.cartman]

Thanks Robert for the explanation. Although I still think this behavior is not very obvious/intuitive because the filter id is unique within the inline svg document root.  I have tested IE10 and Chrome, FF seems to be the only one with this issue.

The most annoying part is that the visibility of the controlling SVG dictates the rendering of all other SVGs with a matching filter ID.

For now, we will just have to remember that when multiple inline SVGs are used in the same page, we have to make sure each of them has unique filter ID or they end up sharing a definition from the first SVG that defines the filter and become invisible when those controlling SVGs are set to invisible or destroyed.

Comment 5

[Robert Longson [:longsonr]]

So move all the filters into a separate svg file and don't make that display:none ever.

Comment 6

[Robert Longson [:longsonr]]

I mean a separate svg section so you have

<svg><defs><filter="MyFilter"/></defs></svg>
<div style="display : none">
<svg><rect filter="url(#MyFilter)"/></svg>
</div>
<svg><rect filter="url(#MyFilter)"/></svg>

If that doesn't work on Chrome, IE raise bugs on those UAs.