Cannot modify or snap to existing features in OpenLayers using the Modify/ Snap interactions in Chrome

Question

I am having a problem in my project where the Modify and Snap interactions don't allow clicking and editing of existing features in a layer. I am using the most recent version of OpenLayers (6.4.3)

I can select features using the Select interaction just fine. But I cannot click a polygon and start modifying it at all.

If I add a Draw interaction to the map with EditSchemeGeometrySubTool.editSource as the source, I can draw and modify those features absolutely fine. But already existing features cannot be modified.

I have tested this is Edge and Firefox and it works fine, but in Chrome I have these issues.

Here is the relevant code. It is in TypeScript.

There is a button on the webpage that calls startEditing() when it is clicked to enable editing.

MapWrapper is another class that holds the openlayers map object.

class EditSchemeGeometrySubTool {
    
    private select : Select;
    private modify: Modify;
    private editSource : VectorSource;
    private editLayer: VectorLayer;
    private snap: Snap;


    startEditing() {
 
      this.select = new Select({layers:[this.editLayer]})

      //The select interaction works fine. 
      this.select.on("select",(e)=>{
        this.mapWrapper.map.removeInteraction(this.modify)
        this.mapWrapper.map.removeInteraction(this.snap)
        console.log(this.select.getFeatures().getLength()) // this prints "1" as expected.
        this.modify = new Modify({features:this.select.getFeatures()})
        this.mapWrapper.map.addInteraction(this.snap);
        this.mapWrapper.map.addInteraction(this.modify)

      })

      this.snap = new Snap({features:this.select.getFeatures()})

      this.mapWrapper.map.addInteraction(this.select)

      this.modify = new Modify({source:this.editSource}) 
      this.mapWrapper.map.addInteraction(this.modify)
      this.mapWrapper.map.addInteraction(new Snap({source:this.editSource}))
    }


    constructor(private mapWrapper:MapWrapper) {
      this.editSource = new VectorSource({
        url: 'https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/geojson/countries.geojson',
        format: new GeoJSON(),
        useSpatialIndex:false,
      });

      this.editLayer = new VectorLayer({source:this.editSource});

      this.mapWrapper.map.addLayer(this.editLayer);
    }
}

Answer 1

I found the issue, posting here in case it helps someone else in the future.

I was launching Chrome from the debugger in Visual Studio. Copy-pasting the link into a normal Chrome window, or launching any other browser (e.g. Firefox) from within the VS debugger makes it work as expected.

I cannot give an exact reason why Chrome, launched from VS debugger, works any differently to a regular Chrome window; both have the same version, hardware acceleration enabled.