Internet Explorer working like Internet Explorer usually does - not working. But this time it's Blazor's fault!

IE11 fails to load a (server-side) Blazor web app

This post was most recently updated on November 22nd, 2019.

Reading Time: 2 minutes.

Welp – this was not a fun issue to run into! While nobody in this day and age should use Internet Explorer for any normal usage (occasional legacy scenarios aside), there are still some luddites who do (or whose IT department makes them to). This means it’s still useful, and sometimes even required, for a web application to work even in Internet Explorer.

Description of the issue

So, like shown in the article’s image, when trying to access your web application using IE11, the page doesn’t load at all. It’s just empty. At the same time, with other browsers it works just fine!

Weirdly enough, this time even observing the console logs is zero help. It only has very normal logging – no errors whatsoever. Something like below:

Internet Explorer 11 console shows no errors. Instead: DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 3733 HTML1300: Navigation occurred. localhost:44307 DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 3733
Internet Explorer 11 console shows no errors, but the Blazor web application still fails to load.
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
3733

HTML1300: Navigation occurred.
localhost:44307

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
3733

This is both kinda shady and pretty critical. So – what do?

Solution

Anyway, the community’s again wiser than its individual members, and there’s a smart contributor who’s found a great workaround and shared it on GitHub!

The fix (and some meta and background discussion) can be found on this GitHub ticket: https://github.com/aspnet/AspNetCore/issues/9436

Still, I thought it’s worth it to explain the solution in more detail. So here goes:

Add Blazor.Polyfill to your solution

So, first of all, go and download the Blazor.Polyfill file from the GitHub repository linked below – this link will download the 3.0.0 (stable) version for you right away. Check out the repository to see if there are newer releases available, though:

https://github.com/Daddoon/Blazor.Polyfill

Add the file to your solution – the most suitable location is probably under wwwroot/js/

Adding blazor.polyfill.min.js to your Blazor solution in Visual Studio
Adding blazor.polyfill.min.js to your Blazor solution in Visual Studio

Next:

Load Blazor.Polyfill in your web application

Add something like this to your _Host.cshtml file – see lines 6-7:

  1. <body data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' id="page-top">
  2.     <app>
  3.         @(await Html.RenderComponentAsync<App>(RenderMode.Server))
  4.     </app>
  5.  
  6.     <!-- This should fix legacy browsers like IE11 https://github.com/aspnet/AspNetCore/issues/9436 -->
  7.     <script type="text/javascript" src="js/blazor.polyfill.min.js"></script>
  8.  
  9.     <script src="_framework/blazor.server.js"></script>
  10.  
  11.     <!-- All the other stuff -->
  12. </body>

If that didn’t work, you can try changing the above to this:

  1. <body data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' data-ocssl='1' id="page-top">
  2.     <app>
  3.         @(await Html.RenderComponentAsync<App>(RenderMode.Server))
  4.     </app>
  5.  
  6.     <!-- This should fix legacy browsers like IE11 https://github.com/aspnet/AspNetCore/issues/9436 -->
  7.     <script type="text/javascript" src="js/blazor.polyfill.min.js"></script>
  8.  
  9.     <script autostart="false" src="_framework/blazor.server.js"></script>
  10.  
  11.     <script>
  12.         Blazor.start();
  13.     </script>
  14.  
  15.     <!-- All the other stuff -->
  16. </body>

Pay attention to lines 10-14 this time. And you should be good!


There are some caveats, though – as it’s a workaround, it’s not supported by Microsoft. And there might be side-effects, something like the ones below:

Antti K. Koskela

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as a Solutions Architect for Valo Intranet, the product that will make you fall in love with your intranet. Working with the global partner network, he's responsible for the success of Valo deployments happening all around the world.

He's been a developer from 2004 (starting with PHP and Java), and he's been bending and twisting SharePoint into different shapes since MOSS. Nowadays he's not only working on SharePoint, but also on .NET projects, Azure, Office 365 and a lot of other stuff.

This is his personal professional (e.g. professional, but definitely personal) blog.
mm

Leave a Reply

avatar
5000
  Subscribe  
Notify of