[Bug] Map canvas is constantly resizing when console is opened or with specific browser window width (infinite resize loop)

[kaligrafy]

Description

I get an infinite resize loop when the console is opened or with specific window size (hard to reproduce, seems random).
While it is resizing, the layers are not loaded and the map stays blank.

ScreenFlow.mp4

May be related to #1687

CSS of the deck.gl map div:
.map { background: rgba(0,0,0,1.0); position: relative; padding: 0; margin: 0; width: 100%; height: 100%; }

Parent div is a flex box

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

The map should not resize infinitely

Steps to Reproduce

Open the console window and resize the browser window until the bug appears. Hard to reproduce every time.

Environment

• Framework version: 9.0.29
• Browser: Chrome
• OS: macos
• OS version: Sonoma 14.6.1

Logs

No response

[ibgreen]

see discussion in #1687 regarding fixes coming in v9.1 that will hopefully fix this long-standing, poorly understood issue.

[Pessimistress]

My advice is to set the CSS width/height of your container, or at least one of its ancestors, using absolute unit (px, pt, vh, vw, etc.). Deck's default width/height are set to fill to its direct parent. If the parent size changes after Deck resizes its canvas, it could lead to a self-feedback loop.