Dlaczego nie działa pinch-to-zoom testowanej strony w telefonie (Android) w Firefox?

Question

Witajcie,

testuje zoom strony w różnych przeglądarkach w telefonie. Jakie mogą być powody, że pinch-to-zoom nie działa w Firefox?

 

Update:

post zaktualizowany o bardziej szczegółowe wiadomości wg. sugestii użytkowników adrian17 oraz  ScriptyChris. Dzięki chłopaki.

Comments

jakiej strony?

---

Dłubię sobie własną stronę :)

Na Chromie jest zoom, a na Firefox nie działa.

---

Możesz pokazać kod odpowiedzialny za zoom?

---

Witaj, oczywiście. Jeśli potrzeba czegos dodatkowego to doślę.

var map = L.map("map", {
  zoomControl: false,
  attributionControl: false,
}).fitWorld();
L.tileLayer(
  ..........................
  {
    zoom: 16,
    id: "mapbox.streets",
  }
).addTo(map);

 

---

Hmm, to teraz pytanie w jaki sposób użyta biblioteka ustawia zoom... Czy możesz udostępnić demo, żeby można było to przetestować?

Swoją drogą ustawiasz zoomControl na false, więc problem jest raczej odwrotny, bo wychodzi na to, że tylko na Firefox zoom jest prawidłowo blokowany.

https://leafletjs.com/reference-1.6.0.html#control-zoom

Czy tam gdzie blokada zooma nie działa, prawidłowo pokazują się dwa przyciski służące do jego kontrolowania? Czy są jakieś błędy w konsoli?

---

Swoją drogą ustawiasz zoomControl na false, więc problem jest raczej odwrotny, bo wychodzi na to, że tylko na Firefox zoom jest prawidłowo blokowany.

Ciekawe a jednocześnie niezrozumiałe. Mógłbyś proszę rozwinąć o co tu dokładnie chodzi?

Problem z zoomem (o czym zapomniałem wspomnieć) dzieje się tylko gdy otwieram stronę na telefonie w przeglądarce Firefox.

Chociaż teraz gdy wspomniałeś o tych błędach uruchomiłem na komputerze i pomimo że działa, wyskakuje w konsoli taki komunikat:

Ta strona używa niestandardowej właściwości „zoom”. Rozważ użycie calc() w odpowiednich wartościach właściwości lub użycie „transform” wraz z „transform-origin: 0 0”.

 

Answer 1

Zdaje się, że biblioteka używa CSS-owego property zoom (niewspieranego przez Firefox) do obsługi zoomu. W takim wypadku powinieneś zrobić tak, jak zaleca komunikat - zmienić na transform: scale(..). Jeśli libka nie umożliwia nadpisania sposobu ustawiania zoomu z JS-a - a finalnie i tak jest to CSS - to powinno udać się nadpisanie ich stylu własnym (niewykluczone, że z użyciem !important - jeśli kod libki z niego korzysta).

Swoją drogą, czy Ty masz na myśli, że nie działa zoom dla strony, czy dla mapy? Property zoomControl odpowiada za konfiguracje zoomu mapy a nie strony, a Ty napisałeś że są problemy z zoomem strony - dlatego pytam.

Comments

Miałem cały czas na myśli właśnie ten pinch-to-zoom.

Ten control ustawiony jest na false nie bez powodu.

Byłem pewny, że wiesz o co chodzi. Toś my sie dogadali :)

W każdym razie.. to jak rozwiązać problem z tym pinch?

---

Sorry, ale zadałeś tak ogólnikowe pytanie, że wątpię czy ktoś by się domyślił, że chodzi o pinch - tym bardziej, że zacząłeś od opisu, że nie działa zoom na stronie, a nie na mapie. Pamiętaj proszę na przyszłość, żeby precyzyjnie opisywać problem i podawać możliwie jak najwięcej szczegółów (jeśli oczywiście można je publicznie udostępnić, np. nie podawaj haseł itp.).

Nie wiem, dlaczego na Firefox nie działa pinch zoom - jak wspomniałem, trzeba by zdebugować tę bibliotekę, poszukać w necie, wgryźć się w dokumentację. Czy działa zoom przez dwukrotne tapnięcie w mapę? Możesz próbować podpiąć się do touchZoom handlera (tu są docsy na temat handlerów); spróbuj opcji touchZoom (konfiguruje zachowanie zooma przy pinchu). Ja bym popróbował do DOMa zapisywać, czy eventy dotyku/zoomu są łapane (żeby widzieć na telefonie bez podpinania debuggera). W ostateczności bym zdalnie debugował apkę na telefonie... Trudno mi coś więcej podpowiedzieć, bez wgryzienia się w kod.

---

Zaktualizowałem pytanie według twoich trafnych uwag. 

Co do:

 Czy działa zoom przez dwukrotne tapnięcie w mapę? 

to 'tak', w ten sposób zoom działa.

A co do:

 Ja bym popróbował do DOMa zapisywać, czy eventy dotyku/zoomu są łapane (żeby widzieć na telefonie bez podpinania debuggera). W ostateczności bym zdalnie debugował apkę na telefonie

 

to zupełnie nie mam pojęcia jak się do tego zabrać. 

---

To zupełnie nie mam pojęcia jak się do tego zabrać. 

Stwórz w HTML jakiś element <div id="test"> i podepnij się pod handlery tej biblioteki dotyczące zoomu i touch eventów (dokumentacje podlinkowałem w poprzednim komentarzu). Gdy handler eventu zostanie wywołany, to do elementu #test zapisuj taką informacje (możesz zrobić kilka takich testowych elementów dla informacji z różnych handlerów) żeby na ekranie telefonu widzieć co się dzieje w kodzie - to taka uboższa alternatywa dla debuggera, jeśli nie ma się dostępu do niego.

Nie jestem w stanie bardziej pomóc bez możliwości przetestowania kodu.

---

Dobrze, będę próbował tego rozwiązania.

Dziękuję, jak zawsze, za twoją wnikliwą pomoc.