Mapbox-gl-js: Fullscreen mode does not work properly in Safari

[dmytro-gokun]

Hi,

i'm using the latest version of the lib (0.53.1). In my app I have a map embedded at some leaf of the HTML element tree. Result: the fullscreen mode works in a mysterious way in Safari on Mac. Precisely, when the fullscreen control is clicked, Safari goes to the fullscreen mode, but the map itself only occupies a part of the screen. The rest is the background. In fact, the size of the map remains the same it was in non-fullscreen mode.

I've been trying to produce a minimal example of the behavior and here's what I've got: https://jsbin.com/tocamuw/11 (remember to preview in a separate browser window/tab, as jsbin editor does not support fullscreen). The result: this snippet works in all major browsers apart of Safari.

So, the question is: is this a known bug? If it is, is there a known work-around? I've tried to google/search through the past issues here, but did not find anything similar or useful.

Thanks in advance,
Dmytro.

[mourner]

Confirmed. Investigating...

[mourner]

That's a weird bug — no luck finding a workaround / fix so far... Would appreciate help.

[dmytro-gokun]

@mourner Not sure if this will give you any idea, but ... One thing i noticed is that mapbox container itself resizes to full screen normally. The thing that would not resize it the canvas that lives inside the main div. Moreover, that canvas has width & height set in the canvas's style attribute, which makes me think it is set by some piece of javascript. And that piece does not do a good job in Safari

[ryanhamley]

Interesting bug. I'm taking a look too. It might have something to do with the map being rendered into a child element of a div. It's definitely a resize issue because in Safari if you go to fullscreen and then hit CMD+OPT+I to open the dev tools, the map resizes to the full width. For whatever reason, that isn't happening automatically in Safari.

[peterqliu]

Looks like Safari has a history of treating fullscreens differently

[ryanhamley]

Our fullscreen code does what that Stack Overflow comment suggests @peterqliu See here: https://github.com/mapbox/mapbox-gl-js/blob/master/src/ui/control/fullscreen_control.js#L114-L135

This is definitely an issue with the map being a child element. If you move the #map div to the top-level, fullscreen works fine. You can force the map to fill the screen with this._map.resize() inside of a setTimeout (even without any time being set), but that's not a great workaround because even the default time of 10 ms causes a noticeable lag in resizing the map. ~Maybe we need to make a parent element fullscreen, if it exists.~ Note that calling the fullscreen API on the parent element doesn't fix this issue.

[dmytro-gokun]

@ryanhamley So, do you plan to make this change in the lib code or should I do the work-around myself in my codebase? Fairly speaking, i think that's belongs to the lib, but it's up to you guys to decide.

[ryanhamley]

@dmytro-gokun i think calling resize is just a workaround and i'm hesitant to put it in the library as a fix for this. i'd rather understand the root cause and see if there's a way to actually fix it, but I don't know what the root cause is yet. If you can call resize in your client app as a workaround for the time being, I'd recommend that until we can figure out what's going on here.

[dmytro-gokun]

@ryanhamley Gotcha. Thanks a ton for your time (Y)

[stafmans]

@dmytro-gokun @ryanhamley I found this discussion because I experience the same issue as described here: when using the fullscreen control via the Mapbox api option the map does not load properly in Safari. Years ago however I implemented with a fullscreen script stored local on my webserver and I had no such issue. Today I found that I used the exact same script the Mapbox site directs me to on the plugins page (where also the api links are).

Can it be the script hosted on Mapbox is different or outdated?
Cause today I again downloaded the script from Github for a new site, installed it locally and everything works perfect on Safari.

[zingi]

I was having the problem that the suggested fix with map.resize() did not work for me in Safari (14.0.1).

I spent a lot of time, to figure out, that safari does not trigger the fullscreenchange event, but only the webkitfullscreenchange event..

So this is working for me:

document.addEventListener('webkitfullscreenchange', () => setTimeout(() => map.resize(), 0))