Popup flickers and fails to stay open with defined offset near top of map

[two3d]

Description

There is an issue with popups that have a defined offset when the marker is near the top of the screen. Specifically, when a marker has a defined offset (e.g., -40 in y), the popup flickers and fails to stay open because the popup appears in front of the marker, causing the hover to be lost. This triggers the mouseout event, causing the popup to close and reopen rapidly.

Steps to Reproduce

1. Create a marker near the top of the map.
2. Define a popup with an offset (e.g., -40).
3. Hover over the marker.

Expected Behavior

The popup should open and remain open while the mouse is hovering over the marker or the popup.

Actual Behavior

The popup flickers and fails to stay open because the popup appears in front of the marker, causing the hover to be lost. This triggers the mouseout event, causing the popup to close and reopen rapidly.

See the video for a demonstration

https://github.com/mapbox/mapbox-gl-js/assets/99763883/2b6e9211-fa20-4608-942e-03f8abc110ed

Suggestion for Improvement

It might be helpful to dynamically set the offset to 0 when the popup opens towards the bottom. This could prevent the popup from appearing in front of the marker and losing the hover state.

Implementing this fix would greatly improve the user experience by preventing popup flickering and ensuring that popups remain open when the user hovers over the marker or the popup itself, even with a defined offset. Thank you for considering this bug report!