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

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.

Tak, oczywiście, masz rację. To dotyczy mapy. Mój błąd.

Tymczasem - kolejne pytanie laika - "gdzie szukać tej właściwości"? W pliku css tego nie ma.  Jedyna linijka zawierająca słowo scale to ta:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 W css jest jeszcze coś takiego, ale nie wiem czy to związane z tematem:

.leaflet-control-attribution {
  z-index: -1000;
}

oraz 

 #map {
  height: 100%;
  width: 100vw;
}

---

Szukaj użycia zoom, a nie scale. A gdzie konkretnie, to nie wiem - tutaj dobrze by było, gdybyś pokazał demo pozwalające sprawdzić jak działa ten kod.

---

Chętnie tylko jak wygrzebać z całości kodu ten odpowiedzialny za zoom? I zestawić to potem wszystko w działający przykład?

 

Zoom w tym pliku html występuje 3 razy. Dwa w kodzie powyżej, który dosłałem oraz tutaj:

 map.locate({
   maxZoom: 16,
   enableHighAccuracy: true,
   watch: true,
 });

 

---

Możesz w DevToolsach przeglądarki użyć zakładki Search (otwierana zazwyczaj skrótem Control + Shift + F) i tam wyszukać po frazie zoom. Powinno znaleźć wystąpienia we wszystkich plikach załadowanych na stronie.

---

Czy to byłoby gdzieś tu? Niby jest to transform. Jeśli tak to gdzie to zmienić i na jakie wartości?  transform: origin (0,0) ?

---

Nie znalazłeś zoom?

---

Jedyny 'inny' jest ten zaznaczony. Pozostałe to beautify markers i leaflet-tiles.

 

---

Screen jest niewyraźny, ale z tego co widzę, to tam jest użyty transform, a nie zoom. Jeśli nie znalazłeś na stronie użyć zoom ani w CSS ani w JavaScript, to trzeba popatrzeć głębiej w kod biblioteki, zdebugować go.

---

Rozumiem,

jak to zrobić?

---

Na MDN jest dokumentacja debuggera Firefoxa (jest też krótki filmik wprowadzający): https://developer.mozilla.org/en-US/docs/Tools/Debugger

---

Ok, podążam za wskazówkami. Który plik wpisać w sekcji 'Przejdź do pliku'? Ten główny html ?

---

Yyy, nie rozumiem, o którą sekcję pytasz? Jeśli debugujesz kod, to zacznij (stawiając breakpoint) od miejsca w kodzie JavaScript, gdzie ustawiasz blokadę zooma.

Chociaż nadal nie rozumiem jednej rzeczy - jeśli wyłączasz (blokujesz) zoom ustawiając property zoomControl: false dla mapy, to raczej dobrze, że zoom nie działa. Ja bym zapytał dlaczego tylko w Firefox jest ok, bo wychodzi na to, że tam zoom jest prawidłowo blokowany, a w innych przeglądarkach możesz używać zooma pomimo blokady. A może pomyliłeś się w treści pytania?

---

Yyy, nie rozumiem, o którą sekcję pytasz? Jeśli debugujesz kod, to zacznij (stawiając breakpoint) od miejsca w kodzie JavaScript, gdzie ustawiasz blokadę zooma.

Mam do wyboru Ctrl+ P, Ctrl+Shift+F itd.. Po wybraniu przechodzę do 'przejdź do pliku' gdzie mam wyszukać plik. I który plik wybrać?

 property zoomControl: false

Ale ta właściwość pokazuje lub nie, ikonki +-. Mam opcję pinch-to-zoom. 

---

Używając Ctrl + P przejdź do skryptu JS, w którym konfigurujesz zachowanie zooma dla mapy.

Ale ta właściwość pokazuje lub nie, ikonki +-. Mam opcję pinch-to-zoom. 

Tak, property zoomControl wg dokumentacji służy do włączenia lub wyłączenia kontroli zoomu na mapie za pomocą przycisków + i -.

O pinch-to-zoom wcześniej nie wspominałeś - co z nim?

---

Właśnie pinch-to-zoom nie działa na przeglądarce Firefox w telefonie (Android).

No i w skrypcie JS również mam te 3 wyniki co wyżej oraz wiele dla leaflet o czym wspominałem już.

---

Czyli przez cały czas miałeś na myśli, że tylko w Firefox nie działa pinch-to-zoom na telefonie? A te przyciski +/- do zoomu mapy działają na telefonie w każdej przeglądarce?

---

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.