Bug 243341 – Gradients in an SVG are affected by parent's `display: none`, when SVG is referenced through <use>

• Status: NEW
• Component: SVG

[Sérgio Gomes]

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.

[Karl Dubost]

Created attachment 461331 [details]
rendering in Safari, firefox, chrome

Firefox Nightly 105.0a1
Google Chrome Canary 106.0.5212.0
Safari 16.0

[Radar WebKit Bug Importer]

<rdar://problem/97892709>

[Ahmad Saleem]

Slight change in result, now Safari 26 Beta + Safari Technology Preview 221 matches Chrome Canary 139.0.7237.0 (Official Build) canary (arm64) but still different from Firefox Nightly 141 (20250613211349)