How to make -webkit-backdrop-filter: blur() work on both Chrome and Safari

Question

https://codepen.io/tretretef/pen/vYzxpXa

body {
  margin: 0px;
  padding: 0px;
}

img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}

.blur {
  position: absolute;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2;
}

<div class="blur"></div>
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png" />

我有一张带有

-webkit-backdrop-filter: blur()

的图像，它在大多数浏览器上都能正常工作，包括 iOS 上的 Safari，但在 macOS 上不行。我正在使用 Safari 15 macOS Monterey 和 iPhone XR 进行测试。

这是它在 Chrome、Firefox、Edge 和大多数浏览器中的样子 .

这就是它在 macOS 上的样子 . 你看不到图像，只有灰色背景。

这是 iPhone，工作正常。

我能想到的修复它的一种方法是使用模糊的透明图像并将其放在图像顶部和英雄文本下方。我也可以编辑图像本身，但每次我需要更新图像时都必须这样做。不理想。有没有办法使用 CSS 来实现这一点？