Skip to content

[filter-effects] What's the order of applying filters and overflow? #12291

Open
@smfr

Description

@smfr

https://drafts.fxtf.org/filter-effects/#FilterProperty says:

The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity. As per SVG, the application of filter has no effect on hit-testing.

which implies that overflow (a type of clipping) is applied after the filter. This suggests that overflow:clip would clip out the part of a drop-shadow filter that extends outside the box. However, Chrome and Firefox don't do this, but WebKit does.

Test: https://codepen.io/smfr/pen/XJbRaeb

Or does the clipping above only apply to clip-path, which is more akin to SVG-style clipping?

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