hasFeatureAtPixel() fails in Samsung Internet Browse... | openlayers/openlayers

Nobody has claimed this yet.

Describe the bug
I use hasFeatureAtPixel() and forEachFeatureAtPixel() to display an overlay when a point is clicked or under the mouse pointer. The lower left corner of the overlay is positioned at the screen coordinate where the mouse action occurred. Because hitTolerance is set to 0, the bottom left corner of the overlay should always be above a point. This works perfectly in desktop browsers.
But in Samsung Internet Browser v16.2.5.4 on Android 10 something may have changed, because for several weeks the overlay sometimes appears after tapping onto the display far away from any point:

Screenshot_20220508-113734_Samsung Internet

How can this happen? And can you give me a tip to work around this problem?

To Reproduce
Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css">
<title>Feature@Pixel</title>
<style>
  #map, html { height: 100%; width: 100%; margin: 0; }
  body { height: 100%; margin: 0; font: 14px Arial; }
  #popup { position: absolute; background-color: #EEE; padding: 5px; bottom: 0; min-width: 60px; }
</style>
<script
  src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js">
</script>
</head>
<body>
<div id="map"></div>
<div id="popup"><div id="popup-content"></div></div>
<script>
  var map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM({maxZoom: 16})})],
    target: 'map',
    view: new ol.View({center: ol.proj.fromLonLat([2, 2]), zoom: 6})
  });
  var circ = new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({color: 'red'}),
      radius: 16,
      stroke: new ol.style.Stroke({color: 'black', width: 2})
    })
  });
  var pts = [0, 2, 4, 6].map(function(n) {
    return new ol.Feature({geometry: new ol.geom.Point(ol.proj.fromLonLat([n << 1 & 4, n & 4]))});
  });
  map.addLayer(new ol.layer.Vector({style: circ, source: new ol.source.Vector({features: pts})}));
  var overlay = new ol.Overlay({element: document.getElementById('popup')});
  map.addOverlay(overlay);
  map.on(['pointermove', 'singleclick'], function (event) {
    if (map.hasFeatureAtPixel(event.pixel, {hitTolerance: 0}) === true) {
      document.getElementById('popup-content').innerHTML = event.pixel.map(Math.round).toString();
      overlay.setPosition(event.coordinate);
    }
    else { overlay.setPosition(undefined); }
  });
</script>
</body>
</html>

Expected behavior
The overlay should never open if you tap outside of a point.

Start with the supplied HTML reproduction using OpenLayers 6.14.1 and test hasFeatureAtPixel() and forEachFeatureAtPixel() in Samsung Internet on Android. Compare the reported pointer coordinates and hit detection with a desktop browser, focusing on the zero hitTolerance case. Done means the browser-specific cause is explained and a verified workaround or regression fix is identified.

Written by the indexing model from the issue text.

hasFeatureAtPixel() fails in Samsung Internet Browser on Android

Description

Contributor guide

First steps

Research direction

Assessment