Full-screen glitches on macOS Safari – browser issue?

Yes, this will be a browser issue, or at least a browser difference. The Leaflet plugin which does the fullscreen isn’t perfect. On my Android phone if I go to fullscreen and back to normal, I can’t return to fullscreen again without refreshing the page. I’ve tried a couple of different things to improve this but can’t find anything that works better.
But no, there is nothing in the configuration that will fix it ??

Really appreciate the quick reply. Totally understood – I’ll just add a note on the site that Chrome works better if anyone really wants to make use of this feature. Thanks again.

Could you try the demo here and see if it works on Safari
https://codepen.io/cferdinandi/pen/ZjVEER

If it does then I will try to get the same thing working on maps.

Could you also try this demo.
https://brunob.github.io/leaflet.fullscreen/

Let me know which of then works.

In case it helps…the demo on https://brunob.github.io/leaflet.fullscreen/ works for me on Safari

Hi, sorry, only just able to get to the computer. Thanks a lot for looking into this further. Like @jaykaywp the brunob link works well. The codepen.io link – I’m not quite sure what I’m doing there, but if I click the Toggle Fullscreen button then the otherwise empty white panel does go full screen, with no grey surround.

This should now be working in 1.1.1. Let me know if there are still problems.

Thanks so much for posting the update. The full-screen view is now good in Safari on macOS, and no longer has the grey surround. Unfortunately though, click-dragging does not seem to work in full-screen (it does in the normal embedded page view) – the map just stays centred. Also the collapse/exit full screen button seems not to work, though the escape key does. Once again in Chrome all is well.

Really appreciate you taking the time with this. If there is any more testing I could usefully do in due course please do say.

Oh, hang on – I just looked again and it’s a bit more complicated than I initially described. In Safari, on clicking the full-screen button the full-screen view appears, the + and – zoom buttons work but the map does not drag (mouse pointer stays as a conventional ‘arrow’ pointer). And I notice at this stage the full-screen button has not actually changed to its ‘exit full screen’ counterpart, and if I hover over it I get a ‘Full Screen’ label. If I then click the button, I stay in full-screen view but now the mouse pointer changes to a hand and I can drag. Still need to use escape to exit the view though. So it looks like all the view functionality is there, but maybe it’s just the button that is not updating correctly.

I’ve changed to a different fullscreen switching plugin and the icon doesn’t change now when you enter fullscreen, but the text should change to ‘Exit Full Screen’. Sounds like it’s nearly working but you have to click it twice to get full functionality.

Can you check the demo is working fully at https://brunob.github.io/leaflet.fullscreen/

Oh wait, the comments on screenfull, which this implementation uses, says that iPhone is not supported:
“Note: Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull.”

Hello, I can confirm that the latest version doesn’t work at all for me on iPhone. I’ve tested the maps on the plugin homepage and I just get a grey box with the control buttons or just a white space where the map should be.

On Mac Safari, it’s the same for me as @robinb415 highlighted.

For me personally, if it’s a choice between one or the other, I would prefer to have the previous implementation where it worked fully on iPhone but the full screen was a bit glitchy on Mac Safari, rather than it not working at all on iPhone.

Also just to confirm the demo – https://brunob.github.io/leaflet.fullscreen/ – works fine for me on iPhone and Mac (the fullscreen button doesn’t remove the toolbars on iPhone Safari but it works fine).

Hope that helps!

I’m seeing the same as @jaykaywp on Mac and iOS. The brunob demo seems robust on both OSs (barring the small proviso with iOS toolbars), but iOS Safari is not playing ball with the 1.1.1 OSDataHub Maps revision.

Thanks for the continued work on getting to the bottom of this.

I’m not sure what’s going on here or why the map would not appear on iOS. Do you have any way of debugging this? Console errors? CSS problem? I don’t have an iPhone so I’m a bit stuck

I have an ancient iPod and it shows the symptom you describe when fullscreen is enabled but works when the fullscreen option is disabled. Is that the same for you?