Internet Explorer problems ...
Mikkel Steen
Hi,
first off all thanks for developing this amazing API!
But i have a problem regarding the maps in IE (who wonders), cause
i have some tiles in an overlay that doesn't exist (simply blank
whitespace). Mapbox.js therefore makes a img-tag with no source,
which in IE is shown as a missing picture, thereby destroying the
map both visually and functionally.
I've attached a image off the problem.
Do anybody know any solution either by javascript hacks or css?
Regards
-
geotema_error.jpg
112.1 KB
geotema_error.jpg
Comments are currently closed for this discussion. You can start a new one.
2 Posted by Erik on 03 Jan, 2013 09:40 PM
I am having the same issue.
Support Staff 3 Posted by Tom MacWright on 04 Jan, 2013 12:39 AM
Hi Mikkel and Erik,
What versions of IE are you using?
Tom
4 Posted by Mikkel Steen on 04 Jan, 2013 12:31 PM
I've tried from ie7 to ie10. Every version recreates the issue.
I think the problem is IE's handling of img-tags with an undefined src. When you have an overlay without background in tilemill it doesn't export the blank tiles. Therefore the tilestream server can't serve the tiles to Mapbox.js when asked for, creating the problem with missing src to img-tags.
What about making a standard blank image used as source, when there is no tile?
I hope I've made the issue clear to you.
Regards
5 Posted by Vasanth Subramanian on 21 Feb, 2013 04:00 PM
Just to add to this, I'm experiencing exactly the same problem and cannot find a resolution to it. Have tried various hacks, such as using jQuery selectors when the map is drawn to try and find any![]()
without a src and remove it. Nothing seems to work, and it
really detracts from the maps when using IE.
6 Posted by barryjames on 04 Mar, 2013 07:23 PM
Hi Guys
Did you add anything to your html to force compatibility?
I added the following (before the header tag) and it seemed to help a bit:
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=EmulateIE8" />
</customHeaders>
</httpProtocol>
</system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=Edge" />
</customHeaders>
</httpProtocol>
Hope this works for you.
Regards
Barry
7 Posted by galenevans on 04 Mar, 2013 09:11 PM
I have been having the same issue. What seems to be issue is the mapbox.js generating the DOM with src='null' which IE is routing to 'webdirectory/null' and getting dead image.
DOM that is created for non-data tiles:
img class="map-tile-loaded" id="5,13,5" style="width: 256px; height: 256px; position: absolute; -ms-transform: translate(494px, 481px) scale(1); -ms-transform-origin-x: 0px; -ms-transform-origin-y: 0px;" src="null"/
What IE is pointing to according to IE Dev Tools Image Report;
SRC: http://WEBPAGE/ie-testing/null
This is being returned as dead image to the IE browser.
('ie-testing' is base directory I am using for testing on IE)
Haven't been able to fix it reliably with a jQuery or CSS hack - havent been able to have timing of going through img DOM and removing null elements co-inside with the tiles being generated. Not sure if there is an area where I could stick it in a callback function. Regardless, going through all image elements isn't the most efficient way.
8 Posted by galenevans on 04 Mar, 2013 09:28 PM
A bit of a hacky fix that seems to work is in the main directory that the maps html is located create a subdirectory called null. In that subdirectory create an .htaccess file that points the directory index to a transparent .png file:
e.g. "DirectoryIndex Transparent.png"
Upload a transparent png to that directory. IE will now load the transparent PNG from the null directory that it looks for when the mapbox.js element points to 'null'.
Support Staff 9 Posted by Tom MacWright on 28 Mar, 2013 10:32 PM
Hi Barry & Co,
The 404 tile issue is fixed in a dev release of mapbox.js and will be rolled out to MapBox's UI.
Tom
Tom MacWright closed this discussion on 28 Mar, 2013 10:32 PM.