Using backdrop-filter: blur() against an element without a background

There appears to be a bug in the behavior of backdrop-filter: blur() on both Chrome and FireFox browsers (at least on Mac OS). This problem is not present on Safari.

Video of bug

I have created a CodePen demo of this problem: https://codepen.io/beefchimi/pen/vYjmQKO

Scenario

• ElementA is a <img />.
• ElementB is a <div /> that overlaps ElementA (via grid, or position, etc... exact layout doesn't appear to matter).
• ElementB applies a backdrop-filter: blur(10px).
• The parent wrapper of these elements has an opacity value below 1.

Problem

The moment the shared parent of these elements drops its opacity, the backdrop-filter: blur() effect does not render correctly. It still applies a blur... but that blur appears to lose intensity the closer it gets to the edge of the underlying element. In other words, the edge of the underlying visuals appear crisp, while further from the edge becomes blurry.

This problem goes away the moment you apply a fully-opaque background style to the parent.

Requirements

In my specific use-case, I cannot apply a background style to the parent. The underlying page uses a background-image that I do not want to conceal.

Questions

1. Is there any clever trick to getting this blur effect to work as desired?
2. Have I got something obvious wrong in my CodePen demo?
3. Is this a legitimate bug in the implementation of backdrop-filter: blur(), and should it be reported to all affected browsers?

Thank you in advance for any assistance.