Bootstrap 5 offcanvas glitchy in fixed div

Question

I am using the bootstrap navbar with offcanvas. All inside a div positioned fixed.

The CSS of the div is as follows:

.whiteHeader {
    position: fixed;
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
    max-width: 1400px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto; 
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
}

The HTML of the navbar looks like:

<nav class="navbar navbar-expand-xxl navbar-light hidden-print">
                    <div class="container-fluid ms-5">
                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="offcanvas offcanvas-start" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                            <div class="offcanvas-header">
                                <a class="navbar-brand mx-auto" href="#">
                                    <img src="" alt="" width="200" height="250" class="d-inline-block align-text-top pt-2">
                                </a>
                            </div>
                            <div class="offcanvas-body">
                                <ul class="navbar-nav">
                                    @if (User.IsInRole("XXX") || User.IsInRole("XXX") || User.IsInRole("XXX"))
                                    {
                                        <li class="nav-item"><a class="nav-link @(ViewBag.Title == "Scan" ? "navactive" : "")" asp-area="" asp-controller="Scan" asp-action="Scan"><i class="fa-sharp fa-regular fa-scanner-gun mx-1"></i> @Localizer["Scan"]</a></li>
                                    }
                                    @if (User.IsInRole("XXX") || User.IsInRole("XXX"))
                                    {
                                        <li class="nav-item"><a class="nav-link @(ViewBag.Title == "List" || ViewBag.Title == "ShowDocument" ? "navactive" : "")" asp-area="" asp-controller="Scan" asp-action="Index"><i class="fa-sharp fa-regular fa-list mx-1"></i> @Localizer["List"]</a></li>
                                    }
                                    @if (User.IsInRole("XXX"))
                                    {
                                        <li class="nav-item dropdown dmenu">
                                            <a class="nav-link dropdown-toggle @(ViewBag.Title == "ApplicationLog" || ViewBag.Title == "ShowLog" || ViewBag.Title == "Usersettings" || ViewBag.Title == "EditUsersettings" ? "navactive" : "")" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="fa-regular fa-gears mx-1"></i>@Localizer["Settings"]</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item @(ViewBag.Title == "ApplicationLog" || ViewBag.Title == "ShowLog" ? "navactive" : "")" asp-area="" asp-controller="ApplicationLog" asp-action="Index"><i class="fa-regular fa-clipboard-list mx-1"></i>@Localizer["Logs"]</a></li>
                                            </ul>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>

Unfortunately it looks like this: The offcanvas is only rendered inside the whiteHeader.

Obviously I want the offcanvas to have 100vh so to say... Any help appriciated.

Answer 1

Found a solution to that problem.

the following three properties are the problem:

left: 50%;
transform: translateX(-50%);
backdrop-filter: blur(8px);