feDisplacementMap fails with feColorMatrix map input
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: ana.tudor.lhnh, Unassigned)
Details
Attachments
(3 files)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0
Steps to reproduce:
- Create a
div
with text such that its upper half (including the text, not just the background) maxes out the red channel, while the lower half has a zero value for the red channel (we normally want this pattern to be relative to thefont-size
, but this is a simplified case). The text maxes out the blue channel.
div {
position: relative;
color: #00f;
isolation: isolate;
&::after {
position: absolute;
inset: 0;
background: linear-gradient(#f00 50%, #000 0);
mix-blend-mode: screen;
content: ''
}
}
- Create and set an SVG
filter
that extracts black text out of the blue channel, then the red channel with.5
alpha. This last result is then used as the displacement map for the previously extracted black text.
<svg width="0" height="0">
<filter id="f2">
<feColorMatrix values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 1 0 0" result="text"/>
<feColorMatrix in="SourceGraphic"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 .5 0"/>
<feDisplacementMap in="text" scale="25" xChannelSelector="R"/>
</filter>
</svg>
div { filter: url(#f) }
Actual results:
The text isn't displaced in Firefox.
Expected results:
The top and the bottom half of the text should be displaced in opposite directions. This is what happens in Chrome and in Safari.
This method of using a CSS-set gradient extracted via feColorMatrix
as a displacement map allows for font-size
-relative displacement maps and for controlling the displacement from the CSS by controlling the custom properties the gradient depends on.
Live tests https://codepen.io/thebabydino/pen/RwOWZMv?editors=1100
A couple of other demos using feDisplacementMap
this way (broken in Firefox, working in Chrome):
https://codepen.io/thebabydino/full/yLwaNQr/b59a40c3e0e161055a3c4e73c4463633
https://codepen.io/thebabydino/full/NWJNRYX/b880fd4ec42cdfc8c72b22c117bc0788
Comment 1•8 months ago
|
||
Comment 2•8 months ago
|
||
Comment 3•6 months ago
|
||
I can reproduce this issue in the latest versions of the 4 channels in Windows 10 and MacOS 11.
I am assuming that the SVG is the correct component. Please change it to a more appropriate one if incorrect.
Updated•6 months ago
|
Comment 5•1 month ago
|
||
I don't even know how to debug filters any more, the filter is played into a draw target recording and then some other process does stuff with it.
FWIW, it fails with feComponentTransfer
too, not just with feColorMatrix
, something I discovered this week with this demo - works perfectly fine in Chrome and Safari, no animation happens in Firefox.
I'd venture to guess it fails in any case where the displacement map comes from the SourceGraphic
. Getting the displacement map out of the SourceGraphic
is a tactic I've used a lot in order to create displacement maps that depend on the font metrics of the font used by the element that has the filter
applied. This allows displacing individual letters without wrapping each in an element - demo. I've also used this in order to animate filters when the state of the elements they're applied on changes (hover like in the first example in this comment or like in this demo, focus, click, whatever) or on scroll (using scroll-driven animations, for example the final effects here, which also need support for animation-range
to work).
Comment 7•1 month ago
|
||
Ashley, is this something you could debug? I saw you working on Webrender and SVG recently.
Comment 8•1 month ago
|
||
Currently feDisplacementMap is not accelerated, so this is hitting the existing blob rendering path - any animation issues would be on that side of things.
Bug to implement WebRender native support for feDisplacementMap https://bugzilla.mozilla.org/show_bug.cgi?id=1896504
Description
•