[filter-effects] relative feDisplacementMap on non-square inputs produces a different result in every browser #596
Description
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
sneeds to be2for100%offset along x axis - scale
sneeds to be2/rfor100%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
2for100%offset along x or y axis
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.