OpenLayers 5 - Click is a little bit displaced

Question

I worry about some problems in my map. The click-Event is working normally, but it is a little bit displaced to the right, which means if i click a little bit left of a feature (maybe 6 pixels or something), it selects the feature, but I actually did not click on it. That means, if there are 2 features next to each other and I click close to the border of the left one, it clicks the right one and not the left one. It feels like the map notices the click a little bit to the right. Anyone has this problem as well?

I teached OL to handle EPSG:25832, cause we are using it generally, so I thought that is the problem. After switching all the EPSG over and over, I figured out that the problem is there, independent which EPSG is used.

I heard about the hitTolerance, so set it to 0, just for testing that.

Here the creation of my map:

map = new Map({
    controls: defaultControls().extend([
    new FullScreen()
]),
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
        projection: 'EPSG:3857'
      })
    })
  ],
  interactions: defaultInteractions({ doubleClickZoom: false }), //deaktiviert Zoom bei Doppelklick
  view: new View({
    center: [630114.604, 5629466.731],
    projection: 'EPSG:25832',
    //extent: transformExtent([4, 46, 16, 56], 'EPSG:4326', projectionName),
    zoom: 2,
    minZoom: 2
  }),
  controls: defaultControls({ "attribution": false }),
});

And here the add of the Select-Interaction (the problem is on every interaction, just this as example how I added them):

function addSelectInteraction() {
var select = new Select({
source: edit
});
select.on('select', function(evt) {
    for(var i=0; i<evt.selected.length; i++) {
        if(document.getElementById("checkbox" + evt.selected[i].getId()).checked == true){
            console.log("Deselect " + evt.selected[i].getId());
            deselectFeature(evt.selected[i]);
        } else {
            console.log("Select " + evt.selected[i].getId());
            selectFeature(evt.selected[i]);
        }
        select.getFeatures().clear();
    }
});
select.set("name", "select");
addTool(select);

}

The selectFeature(feature) is just setting the style of that feature, so it do not has a influence here. And here how I teached OL how to handle EPSG.25832 (with proj4):

var projectionName = 'EPSG:25832';
proj4.defs(projectionName, '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
register(proj4);

Maybe someone has or had this problem as well?

Answer 1

I solved the problem by myself.

Iam adding some things to my html in my JavaScript-Code and the map did not know about that. I just had to map.updateSize() after adding all the stuff and it works fine now.