- From: Ana Tudor via GitHub <noreply@w3.org>
- Date: Thu, 05 Jun 2025 07:24:23 +0000
- To: public-fxtf-archive@w3.org
thebabydino has just created a new issue for https://github.com/w3c/fxtf-drafts: == [filter-effects] relative feDisplacementMap on non-square inputs produces a different result in every browser == Consider we have a rectangular filter input whose aspect ratio `r` is `.8`. We apply an SVG `filter` with `primitiveUnits` set to `objectBoundingBox` on it. In this `filter`, we use `feFlood` to create a displacement map that's `50%` alpha black everywhere. ``` <feFlood flood-opacity='.5'/> ``` Then we want to move our `filter` input along either the *x* (`xChannelSelector='R'`) or *y* (`yChannelSelector='R'`) axis by its edge length along that axis. ``` <feDisplacementMap in='SourceGraphic' scale=s yChannelSelector='R'/> ``` **Chrome**: * scale `s` needs to be `2` for `100%` offset along *x* axis * scale `s` needs to be `2/r` for `100%` offset along *y* axis **Firefox**: * ¯\_(ツ)_/¯ for `100%` offset along *x* axis * scale needs to be `(2√2)/√(1 + r²)` for offset along *y* axis (consistent with diagonal being √2) **Epiphany** (on Linux, can't test in actual Safari): * scale needs to be `2` for `100%` offset along *x* or *y* axis [Live test](https://codepen.io/thebabydino/pen/zxxmZdd?editors=1100). Which is correct? ¯\_(ツ)_/¯ Quite honestly, I'm not the right person to say and for me at this point, any way that works in all browsers the same is better than all doing something different and forcing me to make the input square, then clip it to its desired aspect ratio in order to get the same result cross-browser. Also, why don't we have separate scale values for the *x* and *y* axis? Scaling the channels of the displacement map is a pain. Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/596 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 5 June 2025 07:24:24 UTC