Skip to content

Mobile sidebar backdrop is never cleaned up on viewport resize — whole desktop layout stays blurred #7726

Description

@pfpro

Describe the bug

#createNavigationToggler() (in assets/js/app.js) opens the mobile sidebar by adding ea-mobile-sidebar-visible to and appending a

. Both are only removed when the backdrop is clicked or the toggler is pressed again — never when the viewport changes.

When the browser window is resized from a mobile width (<992px, sidebar open) to ≥992px:

  • the .modal-backdrop stays in the DOM. Since v5.2 it has backdrop-filter: blur(4px) (easyadmin-theme/modals.css), and at ≥992px the sidebar becomes position: static (base.css), so the leftover fixed backdrop (z-index 1050) paints above the entire layout — everything, including the sidebar and content, is blurred until the user happens to click somewhere.
  • body.ea-mobile-sidebar-visible also stays, so the body.ea-mobile-sidebar-visible .sidebar rule keeps applying its mobile drop shadow to the static desktop sidebar.

Before 5.2 the leftover backdrop was a subtle dark overlay, so this mostly went unnoticed; the new blur makes it very visible.

To Reproduce

  1. Open any EasyAdmin backend at a viewport <992px.
  2. Open the sidebar via the hamburger (#navigation-toggler).
  3. Resize the window to ≥992px (e.g. rotate a tablet, un-snap a window, drag wider).
  4. The whole layout is blurred; inspecting shows the stale .modal-backdrop and the ea-mobile-sidebar-visible class.

Expected behavior

Growing past the desktop breakpoint closes the mobile sidebar state: backdrop removed, body class removed.

Possible fix

Watch the breakpoint inside #createNavigationToggler() and reuse the existing cleanup, e.g.:

window.matchMedia('(min-width: 992px)').addEventListener('change', (e) => {
    if (e.matches && document.body.classList.contains(cssClassName)) {
        document.body.classList.remove(cssClassName);
        if (modalBackdrop) {
            document.body.removeChild(modalBackdrop);
            modalBackdrop = null;
        }
    }
});

(EasyAdmin 5.2.0, Symfony 8.1, Bootstrap 5.3.8)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions