CSS backdrop-filter and the oddity of offcanvas

[sfxyz]

Hello guys 👋
I make local repository and build twbs 5.2 docs successfully, then start my SCSS project based on bootstrap docs, but I face unexpected CSS issue (likely) (i figure it out after a couple hour), whenever I customize navbar style (site/assets/scss/_navbar.scss) the code:

.bd-navbar {
  padding: .75rem 0;
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
{ ..... }

I have modification to use backdrop-filter CSS property since it now officially supported by firefox (v103), I've change the code above to:

.my-navbar {
  padding: .75rem 0;
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(var(--bs-primary-rgb), .5), rgba(var(--bs-primary-rgb), .75));
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
  backdrop-filter: blur(1rem);
{ ..... }

Change take effect, navbar now have gradient opacity of primary color and every object behind it become blur. Really nice effect.
Normally when the view-port decreased to medium (tablet) size, the menu items on navbar hiding and the three dots appear as button to trigger offcanvas to show. After I add the backdrop-filter property, the offcanvas doesn't show properly whenever I click the button, the only visible of offcanvas menu is the title.

Please help me guys, I really like the bootstrap documentation style but I want to have a modification on my own. Here are the screenshot of what happened to offcanvas before and after the modification.