Mapbox-gl-js: Fullscreen not working properly Firefox

[1parkplace]

Fullscreen works well in Chrome, but in Firefox, the fullscreen opens but the icon and action do not change of the button so the only way to escape fullscreen is by pressing ESC on the keyboard.

Not sure what is happening as no errors are being thrown in the console.

Any tips on getting it working?

[chris-e-green]

Yes I've noticed this too. It's easily fixed - set the map div width and height to 100% when in full screen mode (via css).

---

From: 1parkplace [e-mail]
Sent: Monday, May 1, 2017 4:54:47 PM
To: mapbox/mapbox-gl-js
Cc: Subscribed
Subject: [mapbox/mapbox-gl-js] Fullscreen not working properly Firefox (#4663)

Fullscreen works well in Chrome, but in Firefox, the fullscreen opens but the icon and action do not change of the button so the only way to escape fullscreen is by pressing ESC on the keyboard.

Not sure what is happening as no errors are being thrown in the console.

Any tips on getting it working?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/mapbox/mapbox-gl-js/issues/4663, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AXGLsg9gMfZxLHVt0IQWLR47gSxIT93rks5r1YG3gaJpZM4NM3uC.

[1parkplace]

@chris-e-green do you happen to have an example of this working? I just checked and don't see any class changes when in fullscreen, so I just tried to apply 100% height/width on the map div regardless and it still isn't working. Opens fine, won't close via button, also note the button itself does not change to the "Shrink" type button.

[chris-e-green]

I hit the same thing yesterday. I was planning to work out a reliable fix and submit a PR. The info I found that showed me what was going wrong is here: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
I found if I enabled developer mode on the browser and overrode the height/width it worked. Without it, it didn't completely fill the screen and the button didn't change (which is what reminded me of your experience). I tried multiple browsers on multiple platforms and found anything from a blank fullscreen map ( completely black) to a narrow strip of a map. I found by examining the div element in developer mode that the width of the div element was ending up as 0.
I'll see if I can produce a MWE for you.

[1parkplace]

@chris-e-green I'm not sure if I'm facing the same challenge. I did inspect the div right outside of the canvas object and noticed it had a 0 height as you had mentioned. I changed this by adding a 100% height/width to the element and then exited fullscreen and tried again and it still remains the maximize icon and does not change to exit fullscreen.

I will keep playing around, but any sort of working example you can provide for your case would surely help! Thanks

Drew

[mollymerp]

Thanks for the report @1parkplace

@colleenmcginnis do you have time to investigate?

[jfirebaugh]

I got this. 😄