Bug: scrollZoom = False does not work on mobile devices

[jkiefn1]

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()

[archmoj]

@jkiefn1 Could you possibly add a video interacting with the codepen & illustrate what is going wrong on your device?

[jkiefn1]

Not sure how to interact with the minimal codepen from mobile devices.

However, put simply, if you were to deploy the app above, "scrollZoom=False" works as intended on desktop, but does not on mobile. You still scroll on zoom on mobile devices.

[archmoj]

Doesn't scroll work on the whole page? Or as you say it is only the map part?
Please clarify or alternatively post a video of the deployed app as you mentioned.

[jkiefn1]

codepen.on.mobile.MP4

I'm referring to the map, as the "scrollZoom" functionality is only applied to the map in the application. Attached is a video of the issue on mobile. You can still scrollZoom on mobile despite being set to "false".

[Coding-with-Adam]

@jkiefn1 Thank you for posting the video.
@archmoj , do you think it's a bug?

[archmoj]

@jkiefn1 Thanks for the video.
That looks like a OS+Browser related bug; whereas I was unable to replicate it.
Would you please let us know which OS and browser you are using?

[jkiefn1]

@archmoj are you using a computer or mobile phone emulator or actually a mobile phone? The issue only persists on mobile devices.

On my laptop w/ Windows 10 x Google Chrome - No issue
On my laptop w/ Mac Big Sur x Safari - No issue
On my laptop w/ Mac Big Sur x Google Chrome - No issue
On my laptop w/ Mac Big Sur x Safari mobile phone emulator - No issue
On my iPhone 12 iOS 15.6.1 - Issue. Can still scroll-zoom even though scrollZoom = False.

[archmoj]

Confirmed bug on iPad and iPhone with either Safari or Chrome browsers.

[jkiefn1]

Any update here @archmoj or @Coding-with-Adam ?