Maps on mobile cannot easily be scrolled past

Setup

• Maps version: current master (dev)
• MW version: current master (dev)
• PHP version: 7.4.0

Issue

On a mobile device go to a page with a map e.g. https://sandbox.semantic-mediawiki.org/wiki/Berlin_map?useformat=mobile

Try to scroll to the bottom.

Expected: Easy peasy

Actual: As soon as the map comes into view, the map intercepts scrolling. It becomes near impossible to scroll, unless one knows to use the tiny margin space to the left or right of the map. This is particularly problematic for accessibility.

A potential fix for this would be to require a user to click to signal an intent to use the map (and allow exit). I see kartographer extension uses an overlay for this purpose (which would also be acceptable).

Suggested criteria of fix

• I can focus and unfocus (enter/exit) the map.
• I can scroll past the map in a similar way to an image.

Demonstration of problem:

Start by reproducing the scrolling behavior on the linked Berlin map page using a mobile device or viewport, then inspect the map's touch and focus interaction entry points. Done means users can focus and unfocus the map and scroll past it similarly to an image, including with accessible interaction.