Leaflet: ios: dragging = false, mas não é possível rolar no mapa

Isso se parece muito com o # 4051, que deveria ter sido corrigido no # 4552. Vamos ver por que essa correção não funciona agora.

Eu tentei o violino no meu dispositivo Android, onde funciona como esperado, e habilitar o arrastar também funciona como esperado, então parece um bug específico do iOS.

Olhando para http://caniuse.com/#feat = css-touch-action, parece que o iOS só tem suporte parcial para touch-action , que é provavelmente a razão para este problema.

No violino vinculado, o mapa tem touch-action: pan-x pan-y; - uma solução para este problema específico seria definir touch-action: auto; para iOS. @oberhamsi poderia verificar se adicionar uma regra extra touch-action: auto antes do atual (https://github.com/Leaflet/Leaflet/blob/364bc7773568070aad596d58001018b0f0b6bb62/dist/leaflet.css#L54) corrige o problema para você? Nesse caso, um PR seria bem-vindo.

infelizmente não ajudou: atualizei o violino para definir touch-action:auto em .leaflet-touch-zoom . então eu também defini pointer-event:auto em .leaflet-tile-container mas ainda sem efeito.

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

um dos manipuladores de eventos poderia fazer preventDefault?

@oberhamsi huh, isso é estranho.

Com relação a preventDefault , não deve haver nenhum ouvinte uma vez que você desabilite o manipulador de arrastar, uma vez que L.Draggable é desabilitado e cancela o registro de seus ouvintes neste caso.

@oberhamsi seria interessante se você pudesse se aprofundar nisso e tentar depurar o que está acontecendo, infelizmente não tenho acesso fácil a nenhum dispositivo iOS.

Houve alguma resolução para isso? Ainda está tendo esse problema.

@GeorgeColdham infelizmente, não. Como mencionei no meu último comentário, estou preso, pois não tenho acesso fácil a nenhum dispositivo iOS para testar, já que funciona como esperado no Android.

Precisamos examinar quais regras CSS ou manipuladores de eventos acionados no iOS impedem a rolagem do mapa, portanto, qualquer ajuda com isso seria muito apreciada!

Eu tenho o mesmo problema. Estou usando o webview no IOS. Mas o problema também ocorre sem a visualização da web. Eu testei no Chrome e no Safari. Meu dispositivo é iphone 4s

Oi,
Posso reproduzir isso com o navegador Android nativo "com.android.browser".
Agente de usuário:
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

O JS SDK do Google Maps tem a mesma função funcionando corretamente no iOS / Android. Pelo que posso ver, funciona sem toque. Alguma ideia de como eles fazem isso?

@perliedman Eu acho que a raiz do problema é o preventDefault no manipulador touchstart aqui: https://github.com/Leaflet/Leaflet/blob/v1.0.3/src/map/handler/ Map.Tap.js # L32

Se eu removê-lo (ou adicionar tap = false às opções), ele funciona no iOS. O problema também poderia aparecer no Chrome para Android antes da versão 55 (o Chrome desde a versão 55 tem suporte para eventos de ponteiro e usa caminhos de código diferentes no folheto). Você pode verificar se for a chrome: // flags em seu dispositivo Android e definir eventos de ponteiro para Disabled .

@herrernst hein, boa análise! Obrigado!

Definitivamente, é o manipulador de torneiras que causa isso. Olhando para o código de teste que usamos em # 4051, na verdade tínhamos tap: false .

Portanto, por enquanto, a solução alternativa é não apenas definir dragging: false mas também tap: false para atingir o comportamento desejado.

Enviei # 5670 em uma tentativa de resolver isso, de modo que não preventDefault para a origem de um evento simulado, a menos que haja um manipulador para o evento simulado.

@perliedman Obrigado por sua resposta e patch!

Isso pode ser reproduzido no Android (7.0) com pelo menos a versão beta mais recente do Firefox 2

Posso confirmar que o código a seguir parece ser uma solução alternativa válida para garantir que um único dedo role a página e não o mapa, ao mesmo tempo em que permite zoom + panorâmica do mapa com dois dedos, bem como tocar nos marcadores. Isso melhora a usabilidade em dispositivos móveis quando um mapa faz parte de uma página maior que requer rolagem.

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

Confirmado no iOS 10 Safari e Chrome. Ainda não foi totalmente testado no Android.

Também confirmo que funciona no iOS 11.3.1, no safari e no Chrome 66
e no Android Chrome 66

@SimonEast Parece funcionar bem no FireFox móvel no Android, mas o Chrome não gosta muito. Amplia todo o site. iOS (11.4) Safari e FF funcionam muito bem. Eu tentei 4 ou 5 truques css / js diferentes, no final este funciona fora da caixa. Obrigado.

Alguém já encontrou a solução?
Eu defini dragging & tap como false e ainda não está funcionando.

Eu defini dragging & tap como false e ainda não está funcionando.

@HlaingTinHtun
Pode ser que o seu caso seja diferente do discutido. Forneça uma amostra de violino para que possamos reproduzir seu problema.

Definitivamente, é o manipulador de torneiras que causa isso.

Em seguida, pode ser corrigido com # 7026.

A página de teste está aqui: https://jsfiddle.net/johnd0e/8kytb1dc/2/show

então parece um bug específico do iOS.

Posso confirmar que não.
O mesmo é reproduzível no Android, no Firefox 68.6, e parece causado por L.Map.Tap . como já relatado.