Blazor (Server-Side) Sidebar Compatability Issues in IE 11

Question

I've been working with Blazor Apps recently (server-side) and noticed that IE 11 Support needs Polyfill for some features that aren't supported.

Although I've applied the necessary dependencies to make this work, my sidebar on IE 11 is behaving in a very different way than the other browsers (Edge, Chrome, Firefox).

When I scroll my "main" content, the side bar is going upwards and leaving a huge blank space in the rest of the page.

Did anyone experienced this? (Note: Didn't change any code regarding the Frontend...)

Update:

    <div class="sidebar">
    <div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">
        <img src="../images/hightide-logo.png" width="80" height="60" class="d-inline-block align-top" alt="" style="margin-top: -5px">
    </a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="contact-us">
                <span class="material-icons">email</span> Contact us
            </NavLink>
        </li>
    </ul>
</div>
</div>

<div class="main">
    <div class="top-row px-4 auth">
        <LoginDisplay />
    </div>

    <div class="content px-4 mt-2">
        @Body
    </div>

    <LayoutFooter>
        <!-- Footer Goes Here -->
    </LayoutFooter>
</div>



.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row {
        background-color: #f4f5f7;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi, .sidebar .material-icons {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

Answer 1

When the scroll appears, the web page looks like this. If this is the problem, to make the sidebar cover the rest of the height. You can change the sidebar CSS style as below (set the bottom property):

.sidebar {
     width: 250px; 
     position: sticky; 
     top: 0px; 
     bottom: 0px;
} 

[Note] You should also change the .sidebar css style in the site.css file, and for the .sidebar CSS style in the media query, also need to remove the height property, like this:

Then, the output like this.