[GIS] OpenLayers polygon fill on IE has black shading

map-drawingopenlayers-2renderingvector

I have an odd problem on with OpenLayers on IE6, IE7 and IE8. A newly drawn polygon has odd black shading. In fact, even the line (stroke) has the same black outline.

Works great in Firefox, Chrome, Safari and even IE9.

I've tried everything from creating my own stylemap and symbolizers, to removing all styles and using default layer, and it still has a problem.

And to add to the puzzle, if you draw a second feature and intersect with the first, the intersected area has perfect colorization/rendering.

I've tried changing the basic style to have a different color (say blue) but then the color is again the base blue plus the black shading/fill attached to it.

enter image description here

Have run the basic drawing example, http://www.openlayers.org/dev/examples/draw-feature.html and it works just fine on all browsers.

enter image description here

Edit 1/10 5p PST

I'm removing my previous edit with "renderer" because it doesn't apply anymore. however I was finally able to create a stripped-down sample that reproduce the error.

I wrote a page that accepts a URL param to enable the bug, and it'll be broken in IE8,7,and 6. All you have to do is draw a polygon, and you'll see that it comes out black

http://dl.dropbox.com/u/47684/nc4/debug/RenderTest.html?break=1

And here's the source:

<html>
    <head>
        <meta  http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

        <script src="http://www.openlayers.org/dev/OpenLayers.js"></script>

        <script type="text/javascript">

            function init()
            {
                // CREATE BASIC MAP
                map = new OpenLayers.Map('map');

                var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
                map.addLayers([wmsLayer]);

                map.setCenter(new OpenLayers.LonLat(0, 0), 3);

                // CREATE LAYER
                polygonLayer = new OpenLayers.Layer.Vector( "New Layer" );

                var bBreak = OpenLayers.Util.getParameters()["break"];

                //  SET OPACITY ??      
                if(bBreak == "1" || bBreak == 1)
                {
                    polygonLayer.setOpacity( 0.8 );
                }

                // ADD LAYER
                 map.addLayers([ polygonLayer]);            

                // ADD CONTROLS
                map.addControl ( new OpenLayers.Control.EditingToolbar ( polygonLayer ) )  ;
            }
        </script>
    </head>
    <body onload="init()">

        <div id="map" style="width: 600px;height: 200px"></div>

    </body>
</html>

As you can see, just setting the layer OPACITY will break it. And this actually breaks on IE6 and 7. It works on 8, but I have compatibility mode set to 7, so yes that makes it break on 8.

Can someone from OL dev group comment why setting opacity is breaking? I've traced the code down to Util.js and the modifyDOMElement function, and it looks to be ok. But… ?

Related Question