feDisplacementMap on generated rectangle not working - svg-filters

Question

I'm trying to create an SVG filter that will "cut" an image in half horizontally, and move the lower part a few pixels to the right. This filter is to be used in CSS.
For this, i am using feDisplacementMap on a rectangle that is generated with 2 feFlood merged together.
This is how i generate the rectangle to be used by the displacement map. I think it is properly generated:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- red channel for displacement, other channels neutral -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<!-- all channels neutral for no displacement -->
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
</filter>
</svg>
Now for the full example with the displacementMap, the filter does not seem to have any effect:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
BUT if i remove the primitiveUnits attribute from the filter, i can get the displacement working:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
From what i understand, i need the primitiveUnits attribute to be "objectBoundingBox", otherwise i can't use percentages of the original HTML element's bounding box so removing this attribute is not an option. But am i hitting a browser bug here or am i missing something ?

Answer 1

Two small errors. You need to put a % in the x of the second flood.
result="rect-blue" x="0%" y="0%" width="100%" height="50%"
And the scale in your displacement primitive needs to be objectBoundingBox as well - so 0.1 (but that's super big - so I changed it to 0.01 below so you can actually see what's happening).
<feDisplacementMap in2="rect" in="SourceGraphic" scale=".01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
And in general, it's best to express objectBoundingBox dimensions as decimals - Firefox, at one point at least, wouldn't accept percentages. And it's also best to define your filter higher in the document than the HTML it will apply to (Safari at one point at least, couldn't find the filter if you did it this way).
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0" y="0.5" width="1" height="0.5"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0" width="1" height="0.5"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="0.01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
<div class="container">
<h1>MY AMAZING TEST TEXT</h1>
</div>