Rendering issues with rounded page and clipped sticky header

Question

Introduction and setup

I tried to achieve a specific layout design using a page wrapper and a sticky positioned header. Being aware that I can use a bit of JavaScript to achieve my desired results, I still aim to get it done with a modern CSS only solution.
Describing it in words is challenging, so please refer to the screenshot and minimal reproducible example below.

The wrapper (direct child of the body) is centered, has some spacing to the screen edges, and rounded corners (border-radius) set. Using position: sticky and top: 0 on the header element makes it easy to create a sticky bar. So far, so good.

Because of the wrapper's border-radius, I needed a solution to "hide" the overlapping edges of the element boxes. Afaik, overflow: hidden doesn't work with position: sticky. I came across overflow: clip which achieves (nearly) the same result as hidden but keeps the sticky functionality.

---

Issues

Unfortunately, I'm encountering some problems across browsers with just this minimal setup (tested in the latest versions of Chrome, Firefox, and Safari):

• Update of the header's "clipped" border-radius:
  • Chrome: stays clipped on the top but not on the bottom edges
  • Firefox: gets updated late (delay) or when clicking in the content
  • Safari: expected behavior
  • Note: scrolling back to the top again, the header doesn't get clipped at all or also with a noticeable delay

• backdrop-filter: blur() on the header:
  • Chrome and Firefox: makes the delay worse
  • Firefox: not working (bug) - removing border-radius or overflow of the header's parent element would fix the issue
  • Safari: everything fine and as expected

Note: At first, I thought that Chrome also just had a delay in updating the clipped border-radius, but I think that some animations that were present on my live page were causing style recalculations or/and repaints and that's why the clipping was sometimes updated in the right moment. Resizing the browser window also updates the "clipping".

I tried using a pseudo-element (header::before) to create the blurred background, hoping it would fix the blur problem in Firefox, but it didn't work.
Adding will-change to the header also didn't fix the issues.

Now, I'm not sure if all of the described issues are rendering bugs of the mentioned browsers or if my CSS setup is not valid/covered by the spec. I've never had such a specific rendering-related problem before, so I don't know what other solutions might be considered.

---

Minimal, reproducible example

.wrapper {
  overflow: clip;
  border-radius: 20px;

  margin-right: auto;
  margin-left: auto;
  border: 3px solid #7f5af0;
  width: 90%;
}

header {
  position: sticky;
  top: 0;

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  background-color: rgba(44, 182, 125, 0.8);
  height: 100px;
}

/* setup (visual) */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 2rem;
  min-height: 3000px;
  font-family: sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #94a1b2;
  background-color: #16161a;
}

main {
  padding: 1rem 5rem 5rem;
  font-size: 2em;
  background-color: #242629;
}

h1 {
  padding-top: 0.8em;
  font-weight: normal;
  text-align: center;
  color: #fffffe;
}

<div class="wrapper">
  <header>
    <h1>Sticky Header</h1>
  </header>
  <main>
    <p>I don't know exactly what to call this design layout. Is there a name for it? "Frame layout", "page within page layout" or "centered page layout"... It's definitely not new in web design, but there are some strange things happening here that I can't explain.<br>My guess is that there are some browser rendering issues going on because of the relatively new CSS properties. I'm aware that I could use some JavaScript to make everything work as aspected, but I want to achieve this design with CSS only.</p>
  </main>
</div>

Example also on CodePen

I would appreciate any suggestions to work around the issues or confirmation that the problems are actually browser bugs.