使用feDisplacementMap作为backdrop-filter时元素偏移且无预期折射效果的问题求助

大家好，我最近在尝试用backdrop-filter结合SVG的feDisplacementMap实现玻璃折射的效果，结果遇到了搞不懂的问题，想请教下各位。

先给大家看下我的实现细节：

HTML中的玻璃方块 #

我在页面里放了一个方块，通过backdrop-filter引用了SVG定义的过滤器：

<div id="glass-block" class="glass-block" style="backdrop-filter: url(#glassFilter);" width="150px" height="150px">
  <p>Some text</p>
</div>

SVG过滤器代码 #

对应的SVG过滤器通过feImage加载位移图，再用feDisplacementMap处理原内容：

<svg width="0" height="0" style="position:absolute">
  <filter id="glassFilter" color-interpolation-filters="sRGB">
    <feImage result="displacementMap" xlink:href="./default_displacement_map.png" width="100%" height="100%"/>
    <feDisplacementMap in2="displacementMap" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" color-interpolation-filters="sRGB" />
  </filter>
</svg>

位移图的说明 #

我用的位移图是default_displacement_map.png，尺寸150x150：中间是均匀灰色，边缘的颜色对应不同的位移方向。我原本的预期是，方块覆盖的内容会产生折射效果——靠近边缘的像素会根据位移图的设置，从画面其他位置取色，模拟玻璃的折射变形。

实际遇到的问题 #

但实际运行结果完全不符合预期：

• 没有出现想要的折射效果，只是被方块覆盖的内容整体稍微向左上方偏移了一点；
• 当把feDisplacementMap的scale值调大到150以上时，画面直接上下颠倒了，依然没有任何折射效果；
• 我还试过给feDisplacementMap加上width="150px"和height="150px"，结果过滤器的生效范围反而比方块还小，效果更糟。

有没有大佬能帮我看看问题出在哪？怎么才能实现我想要的边缘折射效果呢？

内容来源于stack exchange