[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