Very slow hover interactions in OpenLayers 3 with any browser except Chrome

Question

I have two styles of interactions, one highlights the feature, the second places a tooltop with the feature name. Commenting both out, they're very fast, leave either in, the map application slows in IE and Firefox (but not Chrome).

map.addInteraction(new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    layers: [stationLayer],
    style: null // this is actually a style function but even as null it slows
}));

$(map.getViewport()).on('mousemove', function(evt) {
    if(!dragging) {
        var pixel = map.getEventPixel(evt.originalEvent);
        var feature = null;
        // this block directly below is the offending function, comment it out and it works fine
        map.forEachFeatureAtPixel(pixel, function(f, l) {
            if(f.get("type") === "station") {
                feature = f;
            }
        });
        // commenting out just below (getting the feature but doing nothing with it, still slow
        if(feature) {
            target.css("cursor", "pointer");
            $("#FeatureTooltip").html(feature.get("name"))
              .css({
                top: pixel[1]-10,
                left: pixel[0]+15
              }).show();
        } else {
            target.css("cursor", "");
            $("#FeatureTooltip").hide();
        }
    }
});

I mean this seems like an issue with OpenLayers-3 but I just wanted to be sure I wasn't overlooking something else here.

Oh yeah, there's roughly 600+ points. Which is a lot, but not unreasonably so I would think. Zooming-in to limit the features in view definitely helps. So I guess this is a # of features issue.

Answer 1

This is a known bug and needs more investigation. You can track progress here: https://github.com/openlayers/ol3/issues/4232.

However, there is one thing you can do to make things faster: return a truthy value from map.forEachFeatureAtPixel to stop checking for features once one was found:

var feature = map.forEachFeatureAtPixel(pixel, function(f) {
  if (f.get('type') == 'station') {
    return feature;
  }
});