Full-screen glitches on macOS Safari – browser issue?

Resolved robinb415
(@robinb415)

3 years ago

Hi. I’m a new user of the plug-in, and first THANK YOU so much for providing it.

My issue is regarding the full-screen view mode. In the latest version of the Safari browser (running in macOS Catalina 10.15.7) full-screen maps display smaller than full-screen, with grey backgrounds around them. It looks like the map retains its pixel dimensions from how it’s normally displayed in the context of the normal page, though zooming it in full-screen does cause it to increase or decrease in size a little according to the zoom level.

I’m seeing this behaviour with maps on my own site (still in development, but here’s a sample page). Basically stock Twenty Twenty-One theme, latest PHP etc. I also see the same on all the sample maps at https://skirridsystems.co.uk/portfolio/wordpress-plugin-for-ordnance-survey-maps/

It’s probably a specific Safari issue, because full-screen works perfectly using the latest version of Chrome on the same Mac. But I just wanted to rule out that it wasn’t a specific configuration issue that would be easy enough to fix in settings (for the plug-in, or on the server etc).

Thanks – Robin

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

Plugin Author skirridsystems
(@skirridsystems)

3 years ago

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 🙁

Thread Starter robinb415
(@robinb415)

3 years ago

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.

Plugin Author skirridsystems
(@skirridsystems)

3 years ago

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.

Plugin Author skirridsystems
(@skirridsystems)

3 years ago

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

Let me know which of then works.

jaykaywp
(@jaykaywp)

3 years ago

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

Thread Starter robinb415
(@robinb415)

3 years ago

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.

Plugin Author skirridsystems
(@skirridsystems)

2 years, 12 months ago

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

Thread Starter robinb415
(@robinb415)

2 years, 12 months ago

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.

Thread Starter robinb415
(@robinb415)

2 years, 12 months ago

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.

Plugin Author skirridsystems
(@skirridsystems)

2 years, 12 months ago

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/

Plugin Author skirridsystems
(@skirridsystems)

2 years, 12 months ago

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.”

jaykaywp
(@jaykaywp)

2 years, 11 months ago

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!

Thread Starter robinb415
(@robinb415)

2 years, 11 months ago

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.

Plugin Author skirridsystems
(@skirridsystems)

2 years, 11 months ago

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

Plugin Author skirridsystems
(@skirridsystems)

2 years, 11 months ago

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?