Search code examples
internet-explorer-11polyfills

How to discover broken html/javascript in IE11?


I'm trying to use the polyfill for making server-side Blazor work in IE11 here: https://github.com/Daddoon/Blazor.Polyfill

My sample Blazor app just freezes. I don't see any messages in the debug window. I'm assuming that the component library I have created is at fault. I realize that the polyfill is specific to Blazor infrastructure. An example is here and it should be loading the polyfill just mentioned if you use IE11: https://blazorfabric.azurewebsites.net/

However, I have no idea how to go about discovering which API or which html element I have used is not allowed on IE11. Is there a tool that scans code to find potential issues with IE11? Is there some giant polyfill that could be added (temporarily) that will most likely make it work?

Edit 1/22/20 So through pure guessing (pick a random thing and see if it isn't supported on IE11 via caniuse.com), I discovered that custom css properties don't work on IE11. The polyfill that fixes this is: https://github.com/nuxodin/ie11CustomProperties

The page now loads and sort of works. I can't really get the developer console to do much, but the page does respond and it looks (mostly) good.

This still doesn't answer the question. If the debugger doesn't throw an exception on a line of code, it's not clear what to do.


Solution

  • I'm not very sure but seeing your project code seem that there are WASM in there (based on your dependencies). If that is the case, IE11 does not support WASM at all (https://caniuse.com/#feat=wasm). I read somewhere about a WASM polyfill but I'm sure it's NOT a good idea.

    Edit:

    Lots of non-supported features will trigger an error here or there, but not an Exception capturable by javascript. How to detect a problem on this cases.

    • In case of JS features, sometimes the presence of some property on window object or other standard object, some function, or perhaps an action is allowed...
    • For other non-js features, trying to detect the indirect results (or absence of results) from that feature. For example: try to capture events associated, or try to detect the dom position of some element, or try to detect some css-changed-property by that feature... each case is a whole different scenario.
    • For the most extreme cases in which no other option is liable, detecting the browser version from window.navigator.userAgent or other property from window.navigator object. However this is not a 100% liable method and can induce you into false positives or false negatives.

    Hope that this helps out!