GeoJson polygon click event doesn't fire on higher zoom levels

@mourner is already working on this.

Since Apr 5, 2021.

Version: **2.1.0**:

Browser: **chrome**:

### Steps to Trigger Behavior

1.Click on the triangle - nothing happens
2.Zoom closer to the triangle
3.Click again - a popup should appear

### Link to Demonstration
[http://yurix.bplaced.net/showcase.html](http://yurix.bplaced.net/showcase.html)

With the example from [the documentation](https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/), I tried to build my own things. As soon as I used my own geojson polygon, it only works on low zoom levels, not on higher ones.

My code:
```html

Show polygon information on click




body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

mapboxgl.accessToken = 'pk.eyJ1IjoibHVrazExMSIsImEiOiJja2t2OTIxOWExeTd0MnZzMWU0cnd4OTZxIn0.fNlMGBykx5jzAxYBjCFbdA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [8.252984, 47.499826],
zoom: 10
});

map.on('load', function () {
map.addSource('triangle', {
'type': 'geojson',
'data':{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[8.255013,47.467377],
[8.277898,47.490152],
[8.241253,47.491575]
]
]
}
}
]
}
});

map.addLayer({
'id': 'triangle-layer',
'type': 'fill',
'source': 'triangle',
'paint': {
'fill-color': 'rgba(200, 100, 240, 0.4)',
'fill-outline-color': 'rgba(200, 100, 240, 1)'
}
});

map.on('click', 'triangle-layer', function (e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML("test")
.addTo(map);
});
});

```

### Expected Behavior
It should fire the click event on higher zoom levels aswell and the popup should show up too.

### Actual Behavior
It works fine when zoomed in close, but not if zoomed out a bit.