[Bug] Fullscreen map does not cover all the viewport when tab is already in fullscreen mode.

[Stouffi]

Description

When browsing in full screen mode, activating the full screen control on the map will show the map not resized within full screen viewport.

Expected Behavior

The map should resize to cover the entire viewport.

Steps to Reproduce

This bug is reproducible at https://visgl.github.io/react-map-gl/examples/controls using Chrome 119.

1. Enable fullscreen mode at the browser window level (From the Google Chrome menu bar, Select View then Enter Full Screen).
2. Click the Enter fullscreen button on the map.
3. The map will not be resized and will not cover the viewport.

Please note that the bug is not reproducible when DevTools is open

Environment

• Framework version: [email protected]
• Map library: [email protected]
• Browser: Chrome 119
• OS: macOS 14.1.1

Also reproducible with framework version and map library used by example at https://visgl.github.io/react-map-gl/examples/controls

Logs

The bug is not reproducible when DevTools is open.

[faraz-b]

Hmm interesting, adding onto this as I tested on Safari & FireFox as well and it is not reproducible. Only in Chrome. Leads me to believe this is a potential CSS bug with rendering on the V8 engine as WebKit and Gecko engines are able to handle this.

[PauloJorgeS]

I came here today to report this issue, but I see it’s already been noted. My company would really appreciate a fix for it.

[Pessimistress]

I can no longer reproduce this issue with the latest website: https://visgl.github.io/react-map-gl/examples/mapbox/controls I do want to note that the website updated to mapbox-gl 3.9.0, maybe something changed on the Mapbox side?