Openlayers vector layer don't draw well on chrome (single tile)

Question

I have singleTiled layer in OL (using chrome). The layer don't draw completely unless I pan the map slowly to the south (here is example how the layer keep drawing itself each time I pan) :

This is how I create the layer :

var vectors = new OpenLayers.Layer.Vector('vectors', {
    isBaseLayer: false,
    singleTile: true,
    layerName: 'vectors',
    displayInLayerSwitcher: true,
    styleMap: roadsStyleMap
});

Any idea why it happens in chrome only ? (in FF I don't have this problem)

Answer 1

From glancing at your screen shots, it seems like your whole vector layer is getting clipped at the same horizontal line. I saw this once before and my fix was to change my CSS.

OpenLayers uses SVG for rendering vectors on Chrome (I'm 95% sure). So whatever styles apply to the svg element might affect your vector layers. When I had this problem, I added this to my stylesheet:

svg {
    overflow: visible;
}

Then the problem went away. This seems like a sloppy solution (since it just tells the svg element not to clip at its boundaries), and I never identified why the svg element was sized wrong. But it fixed the problem and I never saw any ill effects.

You might also try using Chrome's developer tools to find your vector layer's svg element and see what size it thinks it is.