Why does my OpenLayers 3 map not show in Internet Explorer 11?

Question

I am trying to serve up a map in Internet Explorer that works fine in Firefox or Chrome. While debugging I noticed that something was missing when I tried to bring up the map in IE. This is the html that is in Firefox with the working map:

This is the html that is missing essential elements for the map:

This occurs after I draw a bounding box and submit a search, the search is supposed to find and results that are in the bounding box. Then draw the whole area that each result covers. When the results are supposed to be displayed is when the map does not appear in Internet Explorer 11. A blank map-panel is still displayed but it is missing the map tiles. When you "zoom in" to the map I get this error: Unable to get property 'style' of undefined or null reference.

Can anyone help me figure out why IE leaves these elements out?

Answer 1

After loading Openlayers use this code

var _class = OpenLayers.Format.XML;

var originalWriteFunction = _class.prototype.write;

var patchedWriteFunction = function()
{
   var child = originalWriteFunction.apply( this, arguments );

   // NOTE: Remove the rogue namespaces as one block of text.
   //       The second fragment "NS1:" is too small on its own and could cause valid text (in, say, ogc:Literal elements) to be erroneously removed.
   child = child.replace(new RegExp('xmlns:NS\\d+="" NS\\d+:', 'g'), '');

   return child;
}

_class.prototype.write = patchedWriteFunction;

Answer 2

After much trial and error (and hours on google) I managed to figure out that IE seems to forget how to render your map if you remove it from the page then try to draw vectors/extents on it and bring it back. The solution that ended up working was that I had to reinitialize the map every time I wanted it displayed.