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


And here's the source:

        <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.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 ) )  ;
    <body onload="init()">

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


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... ?

  • I guess we'll have to see the code to help you.
    – unicoletti
    Commented Jan 10, 2012 at 18:59
  • unicoletti, I've added a trimmed example, showing that setting Opacity breaks it in IE
    – Vadim
    Commented Jan 11, 2012 at 1:17
  • @Vadim : What program did you use to create the screenshots with ripped edges?
    – CaptDragon
    Commented Jan 11, 2012 at 18:01
  • @capdragon - I use a program FastStone Capture. I think it's shareware now, used to be freeware, so you'll have to find 1 version back. It has great options to take a variety of screenshots (screen/window/manual) as well as edging and watermarking, and destination can be disk, clipboard or app. Hope that helps.
    – Vadim
    Commented Jan 11, 2012 at 19:44

1 Answer 1


Through various research and responses on the OL mailing list, this appears to be a bug and a known issue with IE + VML.




Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.