scrollZoom = False does not work on mobile devices

When viewing a dash app, scrollZoom=False works as intended for desktop devices, but does not work for mobile devices. This has been confirmed as a bug.

Plotly Community question

Minimal codepen

Python code below:

import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

rgba = 'rgba(248, 246, 243, 1)'

date = [1,1,2,2]
lat = [30, 31, 30, 31]
longs = [-90, -93, -90, -93]
loc = ['Point A', 'Point B', 'Point A', 'Point B']
count = [300, 450, 310, 600]
lwr = 0
upr = 600

df = pd.DataFrame(zip(date, lat,longs,loc,count), columns=['Date','lat','long','Location','count'])

# Initialize the app server, starting info, and rgba of background
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags = [{'name': 'viewport',
                             'content': 'width=device-width, initial-scale=1'
                            }]
                   )

# ------------------------------------------------------------------------------
# App layout (REMEMBER, BOOTSTRAP LAYOUT HAS 12 COLUMNS)
app.layout = dbc.Container([
    
        # Row 1
        dbc.Row([
        
        # Row 1, Column 1 -- The Date Select Slider
        dbc.Col([
            dcc.Slider(id='select_date',
                       min=1, 
                       max=2, 
                       value=1,
                           marks={
                               1: 'Date 1',
                               2: 'Date 2'
                           },
                       included=False
                      )
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '10vh', 'backgroundColor': rgba},
            align='center'
        ),
            
    ], no_gutters=True, align='center', justify='center'),
    
        # Row 2
        dbc.Row([
        
        # Row 2, Column 1 -- The Migration Map
        dbc.Col([       
            dcc.Graph(id='migration_map',
                      figure={},
                      config={'displayModeBar': False
                              ,'scrollZoom': False # This gets rid of the ability to zoom, BUT ONLY ON DESKTOP
                             }, 
                      responsive=True,
                      style={'height': '80vh', 'top': '50%', 'left': '50%', 'backgroundColor': rgba}
                     ),
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '90vh', 'backgroundColor': rgba}
        ),
        
    ], no_gutters=True, align='center', justify='center'),
    
], fluid=True, style={'backgroundColor': rgba})

# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
@app.callback(
    Output(component_id='migration_map', component_property='figure'),
    Input(component_id='select_date', component_property='value')
)

def update_graph(selected_date):
    
    ###############################################
    ##### Start forming the desired DataFrame #####
    ###############################################
    
    dff = df.copy()
    
    dff = dff[(dff['Date'] == selected_date)]

    # Create the figure
    fig = px.density_mapbox(dff
                            ,lat='lat'
                            ,lon='long'
                            ,z='count'
                            ,hover_name='Location'
                            ,center=dict(lat=39, lon=-91)
                            ,zoom=3.475
                            ,mapbox_style='carto-positron'
                            ,opacity = 0.4
                            ,radius = 25
                            ,range_color = [lwr, upr]
                            ,color_continuous_scale=['rgb(0,0,0)',
                                                     'rgb(19,48,239)',
                                                     'rgb(115,249,253)',
                                                     'rgb(114,245,77)',
                                                     'rgb(254,251,84)',
                                                     'rgb(235,70,38)']
    #                             ,color_continuous_scale='inferno'
                           )


    return fig


# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server()

Beginne damit, das Verhalten mit dem verlinkten minimalen CodePen zu reproduzieren, und verfolge, wie die Graph-Konfiguration scrollZoom auf mobilen Geräten verarbeitet. Untersuche den Pfad für mobile Interaktionen für die Einstellung scrollZoom und füge einen Regressionstest hinzu, wenn sich die relevante Teststelle identifizieren lässt. Als abgeschlossen gilt die Änderung, wenn scrollZoom=False das Zoomen auf mobilen Geräten verhindert, wie es auf dem Desktop bereits der Fall ist.