1812474 - Subsequent SVG stop rendering correctly, if the first SVG is hidden by display: none.

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Melissa A [:melissa_a]]

Attachment: testcase.html

Hey there,

I noticed an odd bug with inlined SVG tags, and I couldn't find a duplicate with this exact problem.

Brief:
If two or more of the same SVG are on the page (using <svg>), and the first SVG is hidden, any reference to an item in <def> on subsequent copies of that SVG aren't rendered.

This issue does not exist if an <img> tag is used with an SVG.

An easy way to reproduce this:

1. Create two divs
2. Apply style='display: none;' to the first div
3. In both divs, add the same <svg>. (This SVG must contain a <def> entry, like a gradient.)
4. Observe the second SVG has rendering issues

User Agents of platforms I've tested this on:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0
Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0

I've included a manual test case (attached) using an SVG found on MDN:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

For the time being you can also view this issue live on Thunderbird.net:

https://www.thunderbird.net/en-CA/thunderbird/102.0/whatsnew/#colophon (Broken)

https://www.thunderbird.net/en-CA#colophon (Correct)

In this example we have our logo in the header, which is conditionally hidden on the "What's New" page.

Let me know if you need anymore information!

Cheers,
Mel

Comment 1

[Robert Longson [:longsonr]]

It's not valid to have duplicate id values. If you fix that your testcase will work as you expect.