[BUG]: Points don't appear on scatter map when viewed on a mobile device as a standalone HTML file

[kburchfiel]

Description

I would like to be able to view a standalone .html copy of a Plotly scatter map on my phone. However, when I attempt to do so, I don't see any of the scatter points on the map (though the legend and layers load OK). Fortunately, the map loads fine when I first upload it to GitHub pages and view it from there; however, for debugging and sharing purposes, it would be very helpful to be able to view the points directly from a standalone HTML file.

Screenshots/Video

The HTML copy of the map (created as 'index.html' by the code shown below) loads fine on my laptop:

However, when viewed on a mobile device, none of the points are visible:

Steps to reproduce

The 'index.html' file shown in the previous two screenshots was created by the following code:

# (Almost all of this code comes from the first scatter map example
# found at https://plotly.com/python/tile-map-layers/ .)

import pandas as pd
us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

import plotly.express as px

fig = px.scatter_map(us_cities, lat="lat", lon="lon", hover_name="City", hover_data=["State", "Population"],
                        color_discrete_sequence=["fuchsia"], zoom=3, height=300)
fig.update_layout(map_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.write_html('index.html', include_plotlyjs='cdn')

I then copied the 'index.html' file created by this code onto my phone, then loaded it within my mobile Chrome app.