The SVG element is hidden when it's duplicate hidden with "visibility: hidden"
Reported by
a.plesov...@readymag.com,
Sep 11
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Steps to reproduce the problem: 1. Create an SVG element with clipPath or mask definitions in <defs> 2. Duplicate the SVG 3. Set "visibility: hidden" for the first SVG What is the expected behavior? The first SVG is hidden, the second SVG is visible What went wrong? All SVGs are hidden Did this work before? N/A Chrome version: 68.0.3440.106 Channel: n/a OS Version: OS X 10.13.5 Flash Version: Original example: http://jsfiddle.net/ymrocjsa/5/ Also, I have a similar issue with "display: none", but it affects only some style http://jsfiddle.net/ydzL7xhv/27/
,
Sep 11
Potentially related issue: https://bugs.chromium.org/p/chromium/issues/detail?id=590153
,
Sep 11
,
Sep 11
This is working as intended.
The second SVG still references the <mask> and <clipPath> in the first <svg> fragment, and because those (or more importantly their children) are 'visibility: hidden' (by inheritance) they end up yielding an empty mask and clip path respectively - and thus the <path>s are masked/clipped away and nothing is rendered.
One way to address this is to add a rule like:
mask, clipPath {
visibility: visible;
}
to "unhide" the contents of the <mask> and <clipPath>.
|
|||
►
Sign in to add a comment |
|||
Comment 1 by a.plesov...@readymag.com
, Sep 11