Is it possible to have a CSS backdrop-filter be masked with a gradient and have overflow hidden and border-radius set?

Question

I am struggling to figure out how to get this to work in Chrome (v117.0.5938.92). It works as expected in Safari and Firefox, but it seems as though Chrome just can't handle it. If there are other workarounds on how to get the border radius any help would be appreciated. As you can see from the Codepen (https://codepen.io/andyfought/pen/GRPbgxe) it works as expected until the border-radius is added and then it doesn't respect the gradient mask.

I have attempted to wrap the image in a parent container and set the overflow and radius to that but it seems to create the same issue. I have also attempted to add the border radius with using a clip-path but it creates the same results in Chrome.

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

img {
  display: block;
  width: 320px;
}

.image-blur {
  position: relative;
}

.image-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  mask: linear-gradient(rgba(0, 0, 0, 0), black 90%);
}

.border-radius {
  border-radius: 2rem;
  overflow: hidden;
}

<figure class="card-image image-blur-contain">
  <div class="image-blur">
    <img src="https://unsplash.it/640/860" alt="Card Image">
  </div>
</figure>

<figure class="card-image image-blur-contain border-radius">
  <div class="image-blur">
    <img src="https://unsplash.it/640/860" alt="Card Image">
  </div>
</figure>