Black Lives Matter. Please consider donating to Black Girls Code today.

Scattermapbox does not render in correct size on startup

Hello!

I am creating a Dash app that includes a map made using the following code:

def map(df):
    fig = px.scatter_mapbox(df, lat="Latitude", lon="Longitude", size="Log(TotalRevenue)",
                            color = "Log(TotalRevenue)",  color_continuous_scale=px.colors.sequential.YlOrRd,
                            zoom=2, size_max=10, hover_name='Location', animation_frame='Year',
                            category_orders={'Year':[2010, 2011, 2012, 2013, 2014, 2015, 2016]})

    fig.update_layout(margin=dict(l=15, r=15, t=10, b=10),
                      autosize=True)

    return fig
@app.callback(
    Output('map-container', "children"),
    [Input('datatable-interactivity', "derived_virtual_data"),
     Input('datatable-interactivity', "derived_virtual_selected_rows")])

def update_graphs(rows, derived_virtual_selected_rows):
    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    dff = merged_df if rows is None else pd.DataFrame(rows)

    grouped = dff.groupby(['ZipCode', 'OrderDate', 'Latitude', 'Longitude', 'Location', 'City', 'State', 'Year'])['TotalAmount'].sum().reset_index()

    grouped = grouped[grouped['TotalAmount'] > 0]

    grouped['Log(TotalRevenue)'] = np.log(grouped['TotalAmount'])

    return [
        dcc.Graph(
            figure=map(grouped),
            style={'width':'55vw', 'height':'inherit'}
        )
    ]
dbc.Col(dbc.Card([
                    dbc.CardHeader("Geographic distribution of sales territories",
                                   style={'backgroundColor':'#F3AE4E', 'color':'white', 'fontWeight':'bold'}),
                    dbc.CardBody(
                        id='map-container'
                    ),
                ], className='h-100', color="light", outline=True), width=7)

The strange thing is that on start-up of the app, the map almost always shows up in a smaller size.

Screen-Shot-2019-10-23-at-9-45-10-AM

When I click on the animation button, the map then pops into the right size.

Screen-Shot-2019-10-23-at-9-45-24-AM

This app single-page, but with multiple tabs. Curiously, if the tab that contains this map is the first one to be loaded, the map renders in the correct size.

This is not a serious problem, but a strange one. Is there a way to correct this?

I have posted as an issue on the Plotly Express Github repo, but no luck.

Thank you very much!