Overlay only visible as small bar on the left

elmarquis / Leaflet.GestureHandling

Brings the basic functionality of Google Maps Gesture Handling into Leaflet. Prevents users from getting trapped on the map when scrolling a long page.

MIT License

275 stars 60 forks source link

Overlay only visible as small bar on the left #60

Open Nappyy opened 4 years ago

Nappyy commented 4 years ago

Hi there,

in my Map the overlay is only Visible as small bar on the left (mobile and desktop). There is also no text visible. Screenshot Desktop: https://ibb.co/JyTqJhn Screenshot Mobile: https://ibb.co/YWN2sSr

I've tested it in iOS Safari (iOS 13.5 & iPadOS 14.1) and MacOS Safari and Firefox.

I'm using leafletjs 1.7.1 and GestureHandling (leaflet-gesture-handling.css & leaflet-gesture-handling.js from dist folder)

What can I do to fix this issue?

Kind regards, Kai

uree commented 3 years ago

Here's a quick CSS based fix for anyone facing the same issue

#map::after {
  width: 100%;
  z-index: 1;
}

#map.leaflet-gesture-handling-scroll-warning::after {
  z-index: 1001;
}

#map.leaflet-gesture-handling-touch-warning::after {
  z-index: 1001;
}

Nappyy commented 3 years ago

Hi @uree,

thanks, this is working well on desktop clients. Unfortunately it permanently disables the overlay on mobile clients (no matter if scrolling, tab or touch with two fingers).

Do you have an advice?