OpenLayers 3: Vector Layers not Drawing during animated panning or mouse-drag events

It appears that features on an ol.layer.Vector are not painted or drawn during panning animations or mouse-drag events (in OpenLayers v.3.1.1) Does anyone have a work-around?

To see the problem, take a look at: http://jsfiddle.net/StephenM/489aveLr/6/

If you zoom in on the rectangle covering Antarctica and use the mouse to pan around, you will see that the rectangle is only painted after the mouse button is release and the pan-animation has completed, whichever happens last.

I found some references to this behaviour in older versions of OpenLayers but it was apparently fixed in version 2, already. Why am I seeing it here? I have tested in Internet Explorer and both Chrome and Firefox and the behaviour is the same.

Answer

As @ahocevar mentioned in your ticket, there is a patch for this, and will be implemented in version 3.2.0. Until then, there is a buffer type approach, which can be used to render more of the vector layer than the viewport + 100px. It is called renderBuffer, and can be set as a property of the vector layer.

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [ new ol.Feature({ geometry: polygon }) ]
    }),

    renderBuffer: 1366
});

I set it to 1366, because that is the X axis resolution of my monitor, and this way, I can't scroll in an unrendered range. Or you can just merge the fix in your OpenLayers 3 library.

UPDATE:

I forgot about the pulling animation. This way, the resolution of the monitor will hardly make any sense, but a 5000px value did the magic for me. Although I didn't test the performance of this workaround, so it might be slow with complex layers.