Open karip opened 6 years ago
Interestingly, the results are not as consistent when masks and clip paths are referenced from HTML: https://codepen.io/anon/pen/opGXyx
display: none disables resource? |
Edge | Gecko | Blink | WebKit |
---|---|---|---|---|
<clipPath> on HTML element |
N/A2 | yes | yes | yes |
<mask> on HTML element |
N/A2 | no1 | N/A2 | N/A2 |
<clipPath> on SVG element |
yes | yes | yes | yes |
<mask> on SVG element |
yes | yes | yes | yes |
1) Rendering of element with applied mask gets disabled. 2) Not supported by the implementation.
Note: "display: none
disables resource" means <clipPath>
or <mask>
gets ignored and do not contribute to the rendering of the clipped/masked element.
SVG 1.1 and CSS Masking state for <clipPath>
:
The ‘display’ property does not apply to the ‘clipPath’ element; thus, ‘clipPath’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘clipPath’ elements are available for referencing even when the ‘display’ property on the ‘clipPath’ element or any of its ancestors is set to none.
and for <mask>
:
The ‘opacity’, ‘filter’ and ‘display’ properties do not apply to the ‘mask’ element; thus, ‘mask’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘mask’ elements are available for referencing even when the ‘display’ property on the ‘mask’ element or any of its ancestors is set to none.
Clearly, none of the implementations follow the spec text where display
shouldn't have any affect on <clipPath>
or <mask>
.
@dbaron @longsonr Do you know why there is a difference on <mask>
with display: none
on HTML element in comparison to SVG elements?
I suppose that for HTML, Firefox follows this description (because of display: none
):
A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an mask element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black.
If the <mask>
source gets disabled by display: none
then this makes sense. However, it is still inconsistent with the behavior on SVG and still different to the spec text.
Edit: Gecko issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1463336
Well, I suppose it could be useful to be able to disable/enable all uses of a mask or clipPath with display
— but it would need to be implemented consistently for all use cases!
And it makes the logical model much more difficult: what about display being turned off on a parent element? What about references to clip path and mask in external files (currently only supported consistently in Firefox)?
We'd definitely have to retract the parts of SVG 2 that assign these elements a display: none !important
rule in the user agent stylesheet as a way of replacing the prose about never being rendered regardless of display
value.
Either way, I do think we should continue to distinguish between mask {display: none}
and mask > * { display: none}
, where the latter creates a valid mask that is transparent/empty and completely masks everything. (And the same for clipPath.)
Some of this spec wording dates from the time that we defined defs
in terms of CSS:
defs {display: none }
to explain why anything inside it is not drawn directly. But things can still be drawn if referenced from outside defs.
The SVG Working Group just discussed Disabling masks and clipPaths when display is none
.
The CSS Working Group just discussed disabling masks/clip paths when display:none
.
The SVG Working Group just discussed Disabling masks and clipPaths when display is none
.
RESOLUTION: display: none on mask/clipPath/filter element (or ancestor) should cause the graphical effect to be ignored, so there is no impact on the rendering of the SVG/HTML element the resource applies to (as if it was not specified for that element)
Safari, Firefox, Chrome and Edge allow disabling
<mask>
and<clipPath>
by setting the display property to "none", like this:<mask id="my-mask" display="none">…</mask>
Here’s an example with a mask and a clip path in SVG. They both have display set to "none", which disables them: https://codepen.io/anon/pen/mpBdrx
The paragraph about the display property seems to be about direct rendering, but it doesn’t mention that the display property disables the mask/clipPath:
Could the spec be updated to match the current browser behavior? It should say that if the display property is "none", then the mask or clip path is disabled.