Leaflet: ios: dragging = false mais le défilement sur la carte n'est pas possible

Cela ressemble beaucoup à # 4051, qui aurait dû être corrigé dans # 4552. Voyons pourquoi ce correctif ne fonctionne pas maintenant.

J'ai essayé le violon sur mon appareil Android, où cela fonctionne comme prévu, et l'activation du glisser fonctionne également comme prévu, donc cela ressemble à un bogue spécifique à iOS.

En regardant http://caniuse.com/#feat = css-touch-action, il semble qu'iOS ne prend en charge que partiellement touch-action , ce qui est probablement la raison de ce problème.

Dans le violon lié, la carte a touch-action: pan-x pan-y; - un correctif pour ce problème particulier serait de définir touch-action: auto; pour iOS. @oberhamsi pourriez-vous vérifier si l'ajout d'une règle supplémentaire touch-action: auto avant l'actuel (https://github.com/Leaflet/Leaflet/blob/364bc7773568070aad596d58001018b0f0b6bb62/dist/leaflet.css#L54) résout le problème pour vous? Dans ce cas, un PR serait le bienvenu.

Malheureusement, cela n'a pas aidé: j'ai mis à jour le violon pour définir touch-action:auto sur .leaflet-touch-zoom . alors j'ai également mis pointer-event:auto sur .leaflet-tile-container mais toujours aucun effet.

https://jsfiddle.net/geg8yLe3/6/

l'un des gestionnaires d'événements pourrait-il faire preventDefault?

@oberhamsi hein, c'est bizarre.

En ce qui concerne preventDefault , il ne devrait pas y avoir d'écouteurs une fois que vous avez désactivé le gestionnaire de glissement, puisque L.Draggable est désactivé et désenregistre ses écouteurs pour ce cas.

@oberhamsi, ce serait intéressant si vous pouviez creuser

Y a-t-il eu une solution à cela? J'ai toujours ce problème.

@GeorgeColdham, malheureusement, non. Comme mentionné dans mon dernier commentaire, je suis bloqué car je n'ai pas d'accès facile à un appareil iOS avec lequel tester, car cela fonctionne comme prévu sur Android.

Nous devons examiner les règles CSS ou les gestionnaires d'événements qui se déclenchent sur iOS et qui empêchent le défilement de la carte, donc toute aide à ce sujet serait grandement appréciée!

J'ai le même problème. J'utilise la vue Web dans IOS. Mais le problème se produit également sans aperçu Web. J'ai testé sur chrome et safari. Mon appareil est l'iPhone 4s

Salut,
Je peux reproduire cela avec le navigateur Android natif "com.android.browser".
Agent utilisateur:
Mozilla/5.0 (Linux; Android 5.0.2; LG-D802/V30f Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/34.0.1847.118 Mobile Safari/537.36

Le SDK Google Maps JS a la même fonction fonctionnant correctement sur iOS / Android. Pour autant que je puisse voir, cela fonctionne sans action tactile. Une idée de comment ils font ça?

@perliedman Je pense que le problème racine est le preventDefault dans le gestionnaire touchstart ici: https://github.com/Leaflet/Leaflet/blob/v1.0.3/src/map/handler/ Map.Tap.js # L32

Si je le supprime (ou ajoute tap = false aux options), cela fonctionne sur iOS. Le problème apparaîtrait également dans Chrome sur Android avant la version 55 (Chrome depuis la version 55 prend en charge les événements de pointeur et utilise ensuite différents chemins de code dans Leaflet). Vous pouvez le vérifier si vous accédez à chrome: // flags sur votre appareil Android et définissez les événements de pointeur sur Disabled .

@herrernst hein, belle analyse! Merci!

C'est certainement le gestionnaire de tap qui cause cela. En regardant le code de test que nous avons utilisé dans # 4051, nous avions en fait tap: false .

Donc, pour l'instant, la solution de contournement consiste non seulement à définir dragging: false mais aussi tap: false pour obtenir le comportement souhaité.

J'ai soumis # 5670 pour tenter de résoudre ce problème, de sorte que nous ne faisons pas preventDefault pour la source d'un événement simulé à moins qu'il n'y ait un gestionnaire pour l'événement simulé.

@perliedman Merci pour votre réactif et votre patch!

Cela peut être reproduit sur Android (7.0) avec au moins la dernière version bêta de Firefox 2

Je peux confirmer que le code suivant semble être une solution de contournement valide pour garantir qu'un seul doigt fait défiler la page et non la carte, tout en permettant un zoom à deux doigts + un panoramique de la carte, ainsi que de toucher des marqueurs. Cela améliore la convivialité sur mobile lorsqu'une carte fait partie d'une page plus grande qui nécessite un défilement.

L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile
})

Confirmé dans iOS 10 Safari et Chrome. Pas encore entièrement testé sur Android.

Je confirme également que cela fonctionne sous iOS 11.3.1, à la fois sur Safari et Chrome 66
et sur android chrome 66

@SimonEast semble bien fonctionner dans FireFox mobile sur Android, Chrome ne l'aime pas autant. Zoom sur l'ensemble du site Web. iOS (11.4) Safari et FF fonctionnent très bien. J'ai essayé 4 ou 5 astuces css / js différentes, à la fin, celle-ci fonctionne hors de la boîte. Je vous remercie.

Quelqu'un a-t-il encore trouvé la solution?
J'ai défini dragging & tap comme false et ne fonctionne toujours pas.

J'ai défini dragging & tap comme false et ne fonctionne toujours pas.

@HlaingTinHtun
Peut-être que votre cas est différent de celui discuté. Veuillez fournir un exemple de violon pour nous permettre de reproduire votre problème.

C'est certainement le gestionnaire de tap qui cause cela.

Ensuite, il peut être corrigé avec # 7026.

La page de test est ici: https://jsfiddle.net/johnd0e/8kytb1dc/2/show

cela ressemble donc à un bogue spécifique à iOS.

Je peux confirmer que ce n'est pas le cas.
La même chose est reproductible sur Android, dans Firefox 68.6, et semble être causée par L.Map.Tap . comme déjà signalé.