How to make a Google Maps semi-transparent PNG tile layer work in IE8?

Question

I tried the following

new GTileLayer(null, _minZoom, _maxZoom, { isPng: true, opacity: 0.6 });

But in IE8, while the alpha opacity works, the pixels in the PNG that already had translucence they show a grey color and standard opacity.

I have noticed also that PNG files that contain alpha transparency and their transparency is not modified by HTML style settings behave well in IE8, the problem occurs only when both PNG alpha transparency and HTML alpha transparency are applied to the same image.

Answer 1

It's definitely a well-known bug - see here, here, and here. Just to throw a few links:

• This blog offers a workaround using a IE specific technique.
• This blog has a lenghty explanation for the workaround.

And then there's this addressing a probably different bug in an early release of IE8. He got it solved by enlarging the image - maybe worth a try if you're working with a 1x1 image.

Maybe you can work around this by using different pngs with different opacities, and no CSS opacity?