Offcanvas backdrop in navbar remains visible when displayed on larger screens

[Kopyov]

On certain breakpoint, when offcanvas is triggered on iPad in portrait mode and then the device is rotated, offcanvas disappears as expected. But backdrop remains visible. Same happens when browser is resized - when offcanvas gets hidden, backdrop then is visible on all larger breakpoints.

Suggested fix is to add

.offcanvas-backdrop {
    display: none !important;
}

to .navbar-expand responsive classes. Not sure though if this solution is correct, because backdrop element still exists in the DOM.

[crftwrk]

Hi Kopyov,

this is a known issue. Offcanvas navbar differs from default offcanvas because it‘s placed inside the navbar component and uses navbar-expand-* classes to show or hide offcanvas.

But an open offcanvas do more than open offcanvas and showing a backdrop, it locks body scroll as well.

In case of resize through the breakpoints, backdrop is still visible and scrolling locked.

That must be fixed in JavaScript. In can be done by general hiding offcanvas on resize if component is in navbar or hiding it if offcanvas touches a breakpoint on resize or maybe via a data-attribute.

There will be a solution for this
in furter updates.

[mdo]

Closing as duplicate of #35594. This should be fixed with the JS changes coming in #35736.