Weird black spots on custom Google Map with IE

Question

I'm getting some weird black spots with a custom map page (via the Google Maps API v2.x) I have created. (Click SERVICIOS and then the icon farthest south to generate image shown below.) The issue seems to only appear when using Internet Explorer. I'm wondering if this is a common problem and if there is a common fix?

Any ideas?

Thanks.

UPDATE

In this picture the browser is IE 8.0.6001.18702

Its hard for me to get specific details about the computer because my client took this screenshot, I have been unable to reproduce these black spots.

removed dead ImageShack link

It didn't happen for me in IE6 (work computer). It looks like it could be a problem with the transparency for the shadow PNG under the dialog. — Dónal Boyle, Mar 11 '10 at 22:10
@rockinthesixstring (You're about 6000km off. That's near Lima, Peru.) — Michael Todd, Mar 11 '10 at 22:11
Works fine for me in IE8, Firefox, Opera, Safari, and Chrome. Fluke, maybe? — Michael Todd, Mar 11 '10 at 22:13
@Michael Todd, that's just what they want you to believe ;-) — Chase Florell, Mar 12 '10 at 01:58
In case nobody has noticed it: Those are missing parts from the drop shadow of the dialog box. — , Mar 12 '10 at 14:30
Just curious, is the client machine running short on system memory or has problems with page file? — SoftwareGeek, Mar 21 '10 at 17:42

score 3 · Answer 1 · edited Jun 26 '10 at 07:17

3

This is completely related to the zooming feature in IE8. Ask your client to set his zoom level back to 100% and the black spots magically disappear. This is probably why not everyone can reproduce this problem, because it's a local browser setting. But even now (months later), when I follow your link -- or if I simply go to maps.google.com, do a search, and get the Marker/InfoWindow -- if I have the zoom level set to > 100%, I see those black shadow pieces where Google's javascript is trying to piece together the drop-shadow. So QED: Microsoft STILL has a bug in their scaling algorithm for transparent PNGs in IE8.

Weird black spots on custom Google Map with IE http://img340.imageshack.us/img340/751/googleblackholes.jpg

edited Jun 26 '10 at 07:17

Daniel Vassallo

337,827
72
505
443

answered Jun 26 '10 at 07:03

electromaggot

634
6
16

+1 It looks like you're right. Thanks for sharing this! ... I've added a screenshot as evidence. – Daniel Vassallo Jun 26 '10 at 07:16
Thanks Daniel! I was struggling with this, even with the Google Maps API, so when I figured it out, I just had to share. Plus I have a 30" monitor, not that I'm trying to brag, but the dot pitch is so fine that I HAVE to use zooming & such! So this is an issue that more people will see as time marches on, unless MS fixes it! – electromaggot Jun 26 '10 at 07:34

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

This black (png?) bug might be related to this issue:

IE 8 Black bug

What version of IE are you running? (Note that only some part of the drop shadow seems to be affected.)

edited May 23 '17 at 11:48

Community

1
1

answered Mar 15 '10 at 01:21

futureelite7

11,462
10
53
87

1

Is it sad that I can tell he's running IE 8 just by looking at the screenshot? – Kredns Mar 21 '10 at 04:49
+1 for diagnosis. Unfortunately, as you know, there is not a remedy. – Sky Sanders Mar 21 '10 at 21:22

antyrat · Answer 3 · 2010-03-20T13:08:27.567

I failed to reproduce this error (IE6,7,8,FF,Chrome), but I can offer you to try GMaps Utility Library. It allows to create custom info windows using css (live example that use ExtInfoWindow library extension). This library adds you an opportunity to create info windows without transparency which I think is a current problem.

I've tryed to look what google map API doing with info window at IE8 and found that it add CSS filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://maps.gstatic.com/intl/ru_ALL/mapfiles/transparent.png");

Wich reproduce shadow under the info window based on transparent png image, maybe at your client computer this opportunity (filter) disabled, so I think the best solution is to use library i suggested.

Also you can try ie7-js library that has IE-PNG fix transparent functionality.

score 0 · Answer 4 · edited Sep 21 '12 at 09:12

0

I had this blackspot too. It is generated by the <li>.

Remove the <li> and </li> around the affected area and it will disappear.

edited Sep 21 '12 at 09:12

Adi

5,089
6
33
47

answered Sep 05 '12 at 10:23

BWN100

1

Weird black spots on custom Google Map with IE

4 Answers4