docs-subnavbar blur type backdrop-filter wrongly displayed

Created by: Leuca

This is an issue I've encountered on Safari 13.1.1 (both Mac and iOS versions) using Bootstrap v5 when applying a blur backdrop-filter to a nav element. It might not be present in other browsers and it is hardly noticeable, however when you notice it you cannot ignore it.

I've encountered this issue while making a website and then found out it is present also on https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

I would describe this issue as if for some reason the blur filter could not be applied to the first top part of the subnavbar (same issue with a standard navbar) as it is shown in this picture:

However the good news is that I could actually find a solution to this problem after hours of useless attempts by simply wrapping the nav item in a div element (which obviously also needs the class "sticky-top") with a custom style. Specifically I created a

.bd-wrap-subnav{
  background-color: rgba($white, .75);
  backdrop-filter: blur(1rem);
}

after commenting both background-color and backdrop-filter present in the .bd-subnavbar in the _subnav.scss:

.bd-subnavbar {
  // The position and z-index are needed for the dropdown to stay on top of the content
  position: relative;
  z-index: $zindex-sticky;
  //background-color: rgba($white, .75);
  //backdrop-filter: blur(1rem);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);

I modified the "docs-subnavbar.html" partial like this:

<div class="sticky-top bd-wrap-subnav" style="backdrop-filter: blur(1rem);">
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation">
  <div class="container-xxl d-flex align-items-md-center flex-wrap">
    <form class="bd-search position-relative mb-2 mb-md-0 mr-auto">
      <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
    </form>

    {{ partial "docs-versions" . }}

    <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
     {{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
   </button>
  </div>
</nav>
</div>

The result is this: