SVG定义的backdrop-filter在Safari/Firefox中无法渲染问题排查

我做了一个示例，把同一个包含feTurbulence和feDisplacementMap的SVG滤镜，分别应用在两个HTML元素上：一个用CSS filter()，另一个用backdrop-filter()。在Chrome里两个元素都能正常显示扭曲效果，但在Firefox和Safari中，只有用filter()的元素有效果，用backdrop-filter()的元素完全没变化，而且浏览器控制台和CSS检查器都没报错。

代码示例 #

CSS代码

.modal {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 50%;
  padding: 1rem 2rem;
  backdrop-filter: url(#filter-turbulence);
  background-color: rgba(255, 255, 255, 0.5);
}

.modal p:last-child {
  filter: url(#filter-turbulence);
}

/* 演示用无关样式 */
html, body { height: 100%; width: 100%; } 
body { 
  background-image: url('https://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg'); 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: cover; 
} 
.container { 
  align-items: center; 
  display: flex; 
  justify-content: center; 
  height: 100%; 
  width: 100%; 
} 
a { color: #bf0222; }

HTML代码

<svg height="0">
  <defs>
    <filter id="filter-turbulence">
      <feTurbulence
        type="turbulence"
        baseFrequency="0.01"
        numOctaves="4"
        result="turbulence"
      />
      <feDisplacementMap
        in2="turbulence"
        in="SourceGraphic"
        scale="30"
        xChannelSelector="R"
        yChannelSelector="G"
      />
    </filter>
  </defs>
</svg>

<div class="container">
  <div class="modal">
    <p>这段文字的背景应该通过backdrop-filter()应用SVG滤镜，背景会被扭曲。</p>
    <p>这段文字通过filter()应用SVG滤镜，文字会被扭曲。</p>
  </div>
</div>

调试情况 #

我试过用简单的SVG滤镜（比如模糊、去饱和）测试，Chrome和Safari的backdrop-filter()都能正常工作，但不管怎么组合feTurbulence和feDisplacementMap，在Firefox和Safari的backdrop-filter()里都没效果。

请问这是我定义滤镜时犯了什么明显错误，而Chromium浏览器兼容了这个错误？还是Firefox/Safari的backdrop-filter()实现存在未被记录的已知限制？

内容的提问来源于stack exchange，提问作者Luke Taylor