具有多个矢量图层的OpenLayers地图使整个页面在chrome中闪烁

Question

I have an OpenLayers map, which takes almost all page size. Also it has 13 vector layers on it. When I drag map with all layers enabled - the whole page starts blinking. It is reproduced only in chrome, in firefox everything looks fine. When I disable two layers - blinking stops. If I make map smaller - blinking stops. It looks like some kind of a chrome bug. My chrome version: 31.0.1650.8 beta-m

---

I've created a fiddle to demonstrate the problem. Try set VECTOR_LAYERS_COUNT to 45 and you'll see the problem, also if you reduce width/height of map the blinking will stop even with 45 layers. Here is the code:

var VECTOR_LAYERS_COUNT = 25; // set to 45 to see result
for (var i = 0; i < VECTOR_LAYERS_COUNT; i++) {
    var layer = new OpenLayers.Layer.Vector(i, {
        renderers: OpenLayers.Layer.Vector.prototype.renderers,
        rendererOptions: {
            zIndexing: true
        },
        visibility: true,
    });
    mapa.addLayer(layer);
}

Answer 1

I've had the same problem in Chrome for the last couple of weeks.

This seems to be a known problem with OpenLayers and later versions of Chrome.

The workaround is to disable SVG rendering of layers.

Change the following line from

renderers: OpenLayers.Layer.Vector.prototype.renderers,

to

renderers: ['Canvas', 'VML'],

This fixed the problem for me.

HTH

UPDATE

Turns out this isn't a solution to the problem. The problem lies in Chrome's compositing engine. I have have submitted a bug report to the chromium developers, and they have successfully verified and accepted the bug report.

I'm not sure when the developers will get around to fixing it, but at least there's something in the works.

For those following along at home, this is the bug report: https://code.google.com/p/chromium/issues/detail?id=346621