Some plotly figures stopped being responsive when changing browser zoom level [dash>=3.0]

[njcruzln]

After upgrading from dash 2.17 | 2.18 to 3.0 certain figures stopped automatically updating their size (style.height and style.width) when changing the browser zoom level. See attached images below. In these images the ag-grid (top-left) and the figure within dbc.Tabs (bottom-right) corner are unaffected (unsure why).

dash==2.17.1 (Browser Zoom 50%)

dash==3.0.1 (Browser Zoom 50%)

In dash<3.0 the figure's .plot-container .svg-container and relevant children automatically update width and height to allow the figure to match the size of a responsive container (e.g. dbc.Col). In dash>=3.0 the width and height of these html components are static. See attached images below where I inspect the map figure (bottom-left in the previous images)

dash==2.17.1 (Browser Zoom 75%)

dash==3.0.1 (Browser Zoom 75%)

Other relevant info:

• Working build: dash==2.17.1 + dash-bootstrap-components==1.6.0 + plotly==5.23.0; Upgrading to dash==2.18 and/or dbc==2.0 and/or plotly==5.24 does not introduce the issue.
• Broken build: dash==3.0.1 + dash-bootstrap-components==2.0.0 + plotly==5.24.0; Upgrading to Dash==3.0.2 and/or plotly>=6.0 does not fix the issue. Downgrading to plotly==5.23.0 does not fix the issue.

Based on what I've gathered, dash 3.0 introduces the issue.

Let me know if you need any other information. Thanks for the work you put into dash!

[T4rk1n]

@BSd3v Is this also fixed by #3265 ?

[BSd3v]

Yes, as far as I can tell.

There is no test for this, could probably just add it to the current test if desired.

[njcruzln]

Thanks for the fix!

[T4rk1n]

Fixed in 3.0.3