New public StoryMap not working on mobile (iOS, Android)

[BryanMc]

We created a new ArcGIS Story Map and published. This works on Desktop with Edge, Firefox, and Chrome just fine, but not working at all on iOS (both Chrome and Safari). Getting the error "Hmm... there seems to be an issue". iOS version is the latest as time of writing (iOS 15.3.1), and the Story isn't very complex.

Public Link: https://arcg.is/1OyzvG0

We read some of the recent related posts (updating iOS, or related to some parts not showing, or complex stories). Our story is pretty simple, latest iOS, and the entire Story map doesn't load in any way. Tried both private mode and regular within iOS browsers, clearing cache, etc. No luck as of yet. Same issue in Android OS as well.

[OwenGeo]

Thanks for reporting this. I can reproduce the issue. The story appears to be working as expected in all browsers except Safari on iOS (it works fine in Safari on MacOS). We will look into this and update this thread when we have more information.

After a quick look, the only out of the ordinary thing that I see is that you haven't specified a title for your story and have burned text into your cover image. While that shouldn't crash the page, it's not recommended for several reasons.

It's not good for anyone reading your story on smaller screened devices or narrower browser windows since the text in your image will get cropped, as shown below. When you add a true title the text is resized so that it always visible. Be sure to use the Preview feature in the story builder to look at what your story will look like on other devices before publishing it. 

Also note that if you don't have a title, your story will have a cryptic numeric title when it's shared on social media sites or when it comes up in web search results... You can use the new Share card feature to address this. For more information about that feature, see What’s new in ArcGIS StoryMaps (February 2022) (esri.com).

[BryanMc]

Thank you Owen,

We have been doing additional testing and some updates as you recommended. We've made the heading more responsive and added the page title - additional tweaks will continue.

As for the error, it is still happening but have some updates. I've done some additional tests using Edge browser on desktop and emulation mode. The issue can be replicated when changing the emulation to use a Phone. We also noticed that if you set the browser to 699px width and refresh the page, the issue happens. Change to 701px and refresh, it works again. So possibly related to either a css media query or window change event?!

Thank you again for the help!

[MatthewPugh1]

I was curious if there were any updates on this topic? I am experiencing the same issue with a story map I recently created (not shared publicly yet), but I can view it fine on a phone and on desktop, but not in Safari or Chrome on my iPad Pro (4th gen).

Cheers,

-Matt

[BryanMc · Accepted solution]

I tested again today: iOS 16.3 with both Safari and Chrome browser. It appears to be working now. I'm guessing this could be related to arcgis/core JavaScript updates (currently 4.25.5) or some CSS fixes behind the scenes. I would try opening the story, make a tiny change and save (like turning it off and back on again).