search

w3c / fxtf-drafts

Mirror of https://hg.fxtf.org/drafts
https://drafts.fxtf.org/
Other
69 stars 49 forks source link

[filter-effects] Define filter regions for SVG filters applied to HTML elements #337

Open tigt opened 5 years ago

tigt commented 5 years ago

Filter Effects Level 1 § Filter Region

The problem

WebKit ignores width/height/x/y on <filter> when applied to an HTML element via a CSS reference to that SVG filter. That’s a bit of a mouthful, so hopefully this CodePen of the issue can demonstrate.

In Firefox and Chrome, the two green rectangles are positioned and sized identically. They differ in Safari. See WebKit bug #196826.

What I expect to happen

If filterUnits="objectBoundingBox", the filter region attributes should be relative to the element’s border-box, probably.

If filterUnits="userSpaceOnUse", the filter region attributes should probably map to px of the rendered element, with 0,0 as the element’s upper-left corner.

(Aside for any Web devs reading this for a solution: Safari’s filter region can be expanded by using a transparent box-shadow to extend its paint area. This is probably a hack, though.)

AmeliaBR commented 5 years ago

This also strongly overlaps with similar questions for SVG <clipPath> and <mask> applied to HTML elements, and for SVG paint effects.

I think Taylor's expectations are a reasonable start. We should look at what other browsers are currently doing (for filters & for these other effects).

AmeliaBR commented 5 years ago

Looks like I already have a general purpose tracking issue for this: #249

Taylor: do you think the specifics of the WebKit bug are worth a separate issue, or should we roll it all back into that master one?

tigt commented 5 years ago

This is probably a subset of that bug, but this does further clarify that Safari doesn’t clip the fill to the border-box exactly, what with the box-shadow behavior.