none
Map is showing blurry tiles when displayed in IE RRS feed

  • Question

  • We are seeing a bug where maps are loading partial views in IE8 and blurry views in IE9.  This happens when the map's container goes from a display:none state to a display:block state.  

    For a very simple example, check here: https://geofeedia.com/mapbugdisplaynone

    This bug only occurs in IE.  Everything works fine in FF, Safari, and Chrome.

    I've made sure to set the width and height when loading the map.

    In the example, you'll see that the only code is to show the map's container.  

    Can anyone explain how we can get this scenario to work properly in IE?

    Thanks,

    Scott

    Friday, October 5, 2012 1:59 AM

Answers

  • I've tried in multiple IE instances and have asked others to try to, and it seems that everyone sees the blurry image below.  

    Richard, could there be anything unique to your IE setup that allows you to see the right results?

    btw, I found a workaround last night.  It seems that once you show a map after it's been in a hidden state (hidden by virtue of being contained in a display:none container or in a container that is off screen, such as with top: -9000px), you need to reset the map's height and width.  I created a Resize() function to do that, as in:

    Microsoft.Maps.Map.prototype.Resize = function () {
        var $mapElement = $(this.getRootElement());
        this.setOptions({ height: $mapElement.height(), width: $mapElement.width() });
    };

    Now, whenever a map is displayed after having been hidden, I call map.Resize() and everything is working fine.  

    Mods, you can close this as answered with this solution.

    Blurry image example:




    Friday, October 5, 2012 1:01 PM

All replies

  • I've tested your site against IE7 8, 9 and 10 and it works on all of them fine. Note you haven't added a position value to the map div, only to the map-container. Try adding a position to the map div as this is required.

    http://rbrundritt.wordpress.com

    Friday, October 5, 2012 7:39 AM
  • I've tried in multiple IE instances and have asked others to try to, and it seems that everyone sees the blurry image below.  

    Richard, could there be anything unique to your IE setup that allows you to see the right results?

    btw, I found a workaround last night.  It seems that once you show a map after it's been in a hidden state (hidden by virtue of being contained in a display:none container or in a container that is off screen, such as with top: -9000px), you need to reset the map's height and width.  I created a Resize() function to do that, as in:

    Microsoft.Maps.Map.prototype.Resize = function () {
        var $mapElement = $(this.getRootElement());
        this.setOptions({ height: $mapElement.height(), width: $mapElement.width() });
    };

    Now, whenever a map is displayed after having been hidden, I call map.Resize() and everything is working fine.  

    Mods, you can close this as answered with this solution.

    Blurry image example:




    Friday, October 5, 2012 1:01 PM
  • I have the exact same problem.  Thanks for working on your solution!
    Thursday, June 20, 2013 6:10 PM