Bug 243341

Created attachment 461295 [details]
Safari test result

Steps to reproduce the problem:
1. Visit https://codepen.io/sergiomdgomes/pen/JjLOmoa?editors=1100
2. Observe result

Expected: both circles look the same, with a black stroke and a gradient fill.
Observed: the first circle has a black stroke but a solid fill.

Problem Description:
When:
- An SVG exists inside a `display: none` parent
- That SVG contains a named gradient that gets used inside the same SVG for a fill (via `url()`)
- Another SVG references the first one via SVG <use>

Then: the gradient will not render correctly.

If you visit https://codepen.io/sergiomdgomes/pen/JjLOmoa?editors=1100 you'll see that if the referenced SVG is inside a `visibility: hidden` parent, both the stroke and the fill (which uses a named gradient) will render correctly. However, if the referenced SVG is inside a `display: none` parent, then the stroke will render correctly but the fill will not.

Firefox correctly renders the stroke and the fill in both situations.

Chromium also fails to render the gradient for a referenced SVG inside a `visibility: hidden` parent, but it applies an empty fill instead of a solid one ( Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1348561 )

Note that this is not just an issue with gradients; it also seems to be an issue for other named elements, such as masks and clip paths.