I'm working with the Google Maps API and I'm using a div that overlays the map.
I have an event handler for clicks on the map itself and on the overlay. Using Chrome on the desktop, if I click on the overlay, the click event for the overlay is triggered first and then the one for the map below, like I expected.
However, on Chrome and Firefox for Android, the events are triggered in reverse order: first the map's and only then the overlay's event.
This can even be reproduced using Chrome for desktop (macOS) while "emulating" a mobile device using the Dev Tools with the iPhone X settings, for instance.
This CodeSandbox illustrates the problem. Viewing the resulting CodeSandbox web page in Chrome and swapping between regular view and view as an iPhone X should show that events are triggered in reverse order.
Is this expected behaviour? If not, how can I always get the same order as on desktop?