Adding backdrop-filter blur on navbar breaks offcanvas element

[firesightstudios]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Create a Navbar With offCanvas element & add custom class

<nav class="navbar fixed-top customNavbar-mobile">

Add css to custom class

.customNavbar-mobile { background-color: #282d43cc !important; backdrop-filter: blur(5px); }

Offcanvas breaks.

Reduced test cases

https://codepen.io/Justin-Zimmerman/pen/WNBzLBB

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.3.3

[LadonAl]

This does not seem to be a bug actually. Refer to this

I believe that something like this should solve your problem:

.customNavbar-mobile {
  background-color: #282d43cc !important;
}

.customNavbar-mobile .offcanvas-backdrop {
  backdrop-filter: blur(5px);
}

[firesightstudios]

This does not seem to be a bug actually. Refer to this

I believe that something like this should solve your problem:

.customNavbar-mobile {
  background-color: #282d43cc !important;
}

.customNavbar-mobile .offcanvas-backdrop {
  backdrop-filter: blur(5px);
}

Thanks for the reply, but for some reason when you do that the transparency with the blur changes

.customNavbar-mobile {
        background-color: #282d43cc !important;
        backdrop-filter: blur(20px);
}

Produces:

.customNavbar-mobile {
        background-color: #282d43cc !important;
}

.customNavbar-mobile .offcanvas-backdrop {
        backdrop-filter: blur(20px);
}

Produces:

^^ Your method partially works but the blur is ignored no matter the amount you apply to it.

[firesightstudios]

So it looks like adding height: 100vh; to the .offcanvas fixes the issue. height: 100%; does not work.

My final code that works:

.offcanvas {
        height: 100vh;
}

.customNavbar-mobile {
        backdrop-filter: blur(20px);
}

[firesightstudios]

Working Codepen with changes

https://codepen.io/Justin-Zimmerman/pen/jOoxOVw

not sure if this is a bug ill let someone else decide if this should be closed.

[julien-deramond]

It's not a Bootstrap bug as mentioned in https://github.com/orgs/twbs/discussions/40576#discussioncomment-9858213, and so https://drafts.fxtf.org/filter-effects/#FilterProperty:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

So I've transformed this issue to a GitHub discussion if it can help folks in the future :)