[Webkit-unassigned] [Bug 243341] New: Gradients in an SVG are affected by parent's `display: none`, when SVG is referenced through <use>
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Fri Jul 29 08:10:52 PDT 2022
https://bugs.webkit.org/show_bug.cgi?id=243341
Bug ID: 243341
Summary: Gradients in an SVG are affected by parent's `display:
none`, when SVG is referenced through <use>
Product: WebKit
Version: Safari 15
Hardware: Unspecified
OS: macOS 12
Status: NEW
Severity: Normal
Priority: P2
Component: SVG
Assignee: webkit-unassigned at lists.webkit.org
Reporter: sergio.gomes at automattic.com
CC: sabouhallawa at apple.com, zimmermann at kde.org
Created attachment 461295
--> https://bugs.webkit.org/attachment.cgi?id=461295&action=review
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.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220729/94e6608e/attachment.htm>
More information about the webkit-unassigned
mailing list