Openlayers 3 styling dynamic radius feature performance issue

Question

I am migrating from 2.14 and have some features that come with a radius property.

The expected behaviour is that when the users zooms in or out the feature renders without perceptible jumps as with 2.14.

http://gyazo.com/bb46051994981d6d22cec4f7f88ff03a (ol 3) http://gyazo.com/4f6a2793abacc597029c3c28cfec316f (ol 2.14)

Current code (v3)

var layer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: styleFunction
});

var styleFunction = function(feature, resolution) {
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 0, 0, 0.1)'
        }),
        image: new ol.style.Circle({
            radius: calculateRadius(feature, resolution),
            fill: new ol.style.Fill({
              color: 'rgba(255, 0, 0, 0.1)'
            }),
            stroke: new ol.style.Stroke({
                color: 'orange', 
                width: 2
            })
          })
      })];
};

Previous code (v2.14)

var context = {
    getRadius: function(feature) {
        var radius = setup.DEFAULT_RADIUS;
        if (feature.attributes && feature.attributes.radius) {
            radius = feature.attributes.radius;
        }
        return radius / feature.layer.map.getResolution();
    }
};

var defaultStyle = new OpenLayers.Style({
  "pointRadius": "${getRadius}"
}, { context: context });

var layer = new OpenLayers.Layer.Vector("layer", {
    styleMap: defaultStyle
});

Answer 1

Got the answer from the ol team.

This is closer to what we had in v2.14 but still shows poorly on zoom out though.

http://gyazo.com/3f93b241421a8dc73d0f77d39e5c3300

Resulting code requires and extra indirection to get styling and features working as well.

var layer = new ol.layer.Image({
    source: new ol.source.ImageVector({ 
        source: new ol.source.Vector(), 
        style: styleFunction 
    })
});

//layer.getSource().getSource().clear();
//layer.getSource().getSource().addFeatures(parsedFeature);