Skip to content

[css-masking] Disabling masks and clipPaths when display is none #245

@karip

Description

@karip

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:

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.

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions