title: Blazor (Server-Side) Sidebar Compatability Issues in IE 11
body: <p>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.</p>
  
  <p>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).</p>
  
  <p>When I scroll my "main" content, the side bar is going upwards and leaving a huge blank space in the rest of the page.</p>
  
  <p>Did anyone experienced this? (Note: Didn't change any code regarding the Frontend...)</p>
  
  <pre><code>Update:
  
      &lt;div class="sidebar"&gt;
      &lt;div class="top-row pl-4 navbar navbar-dark"&gt;
      &lt;a class="navbar-brand" href=""&gt;
          &lt;img src="../images/hightide-logo.png" width="80" height="60" class="d-inline-block align-top" alt="" style="margin-top: -5px"&gt;
      &lt;/a&gt;
      &lt;button class="navbar-toggler" @onclick="ToggleNavMenu"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="@NavMenuCssClass" @onclick="ToggleNavMenu"&gt;
      &lt;ul class="nav flex-column"&gt;
          &lt;li class="nav-item px-3"&gt;
              &lt;NavLink class="nav-link" href="" Match="NavLinkMatch.All"&gt;
                  &lt;span class="oi oi-home" aria-hidden="true"&gt;&lt;/span&gt; Home
              &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li class="nav-item px-3"&gt;
              &lt;NavLink class="nav-link" href="contact-us"&gt;
                  &lt;span class="material-icons"&gt;email&lt;/span&gt; Contact us
              &lt;/NavLink&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
      &lt;div class="top-row px-4 auth"&gt;
          &lt;LoginDisplay /&gt;
      &lt;/div&gt;
  
      &lt;div class="content px-4 mt-2"&gt;
          @Body
      &lt;/div&gt;
  
      &lt;LayoutFooter&gt;
          &lt;!-- Footer Goes Here --&gt;
      &lt;/LayoutFooter&gt;
  &lt;/div&gt;
  
  
  
  .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;
              }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/D5RvJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D5RvJ.png" alt="Sidebar Issue"></a></p>