search

Maps4HTML / MapML.js

A custom <mapml-viewer> and <layer-> element suite
https://maps4html.org/MapML.js/
Other
58 stars 16 forks source link

Fullscreen control not working on touch devices #162

Closed Malvoz closed 4 years ago

Malvoz commented 4 years ago

The fullscreen control doesn't initiate fullscreen mode in some browsers on touch devices/touch simulation.

Repro steps:

  1. Go to https://geogratis.gc.ca/mapml/en/osmtile/cbmt/
  2. Open devtools, Toggle Device Toolbar in Chrome or turn on Responsive Design Mode in Firefox (ctrl + shift + M)
  3. Refresh the page then press the fullscreen control
Malvoz commented 4 years ago

I tested installing the official (but unmaintained) Leaflet.fullscreen, still the same issue. The control works in their demo when reproducing the above steps, so it's an issue with this build only.

prushforth commented 4 years ago

Seems to work on my Pixel 4 Firefox, but not working on blink browsers.

ahmadayubi commented 4 years ago

I tried it on chrome, firefox, edge and duckduckgo browser on pixel 2 xl and they all worked. I also tried the chrome device toolbar in my laptop browser and that worked too.

@prushforth you mentioned it doesn't work on blink browsers, any in specific? I believe chrome is a blink browser and it worked in my case.

prushforth commented 4 years ago

Chrome is def a blink browser, so is new Edge and Brave browser. Let me see if my results have changed since Sept.

prushforth commented 4 years ago

Nope, on chrome, the device does not recognize the touch event on the fullscreen icon on geogratis.

Tried in Firefox, it works.

prushforth commented 4 years ago

Does not work in new edge either, whereas the +/- buttons just adjacent to it do work. That might be a clue.

prushforth commented 4 years ago

If I understand correctly, the fullscreen mode is limited to secure domains. While the lock icon does come up for that domain, perhaps it is mixed content or something that chrome sees that ff isn't seeing that disables the fullscreen mode on chrome.

Malvoz commented 4 years ago

perhaps it is mixed content

Good thinking, I can see how that could cause the issue, although that doesn't seem to be the case. In Chrome it's easy to spot mixed content, e.g. see console warnings for https://active-mixed-content.glitch.me/ (found the link in https://web.dev/fixing-mixed-content/).

Malvoz commented 4 years ago

mapml-viewer.js served at https://geogratis.gc.ca/mapml/en/osmtile/cbmt/ is a bit outdated at this point, I suppose we can close this issue as I can't reproduce with the demo pages.

prushforth commented 4 years ago

Darn - that's my fault. Sorry to waste your time.

Malvoz commented 4 years ago

No worries Peter, perhaps I shouldn't have filed a bug against geogratis.gc.ca. If the bug resurfaces we'll just re-open this 😋

prushforth commented 4 years ago

Dreaming of a hosted service at maps4html.org...

In the mean time, I updated the code on geogratis. Hopefully the fullscreen bug will disappear.

Malvoz commented 4 years ago

Confirmed, no bug on geogratis! 👍

ahmadayubi commented 4 years ago

Maybe we can use Heroku. I've used it in the past, it rebuilds the src on every push/PR to the repo and works really well. Only down side to the free version is that it takes a few seconds to load when it cold starts.