Storymap with several swipe maps crashes on iPhone

[MartinHøyem]

Hi, I have seen somebody post a similar question before, but after having taken the measures suggested in the reply to that question I still have the same problem. I'm stumped, and wonder if anybody has a solution:

Here's the Storymap in question: A cultural landscape is fading away 

It consists of a few images, some text and 6 swipe maps. The swipe maps are, together with images, inside of 6 sidecars. The 6 web maps that I use for the swipes each have 2 layers, and are each less than 200 KB. 

The problem is when I display this on an iPhone: after scrolling some distance down the page, the page reloads and jumps to the top. Some test users also report that they get an error message on their iPhone saying there's an error to do with a repeating problem.

Is there a way I can get this to not happen, or is this Storymap a lost case on an iPhone?

Any help is appreciated!

Sincerely,
Martin

[OwenGeo]

@MartinHøyem -- Thanks for sharing your experience with this story. I'm sorry this issue is impacting your story, but I do have some suggestions to alleviate the issue!

The issue is that once you scroll into the story past the second sidecar, there are 6 web maps loaded at any one time. Unfortunately, the file size of the web map is not the issue (all web maps are just JSON files, so are very small). Even the size of the dataset is not the primary concern. It all boils down to the number of maps and layers that are loaded simultaneously.

Without getting into all the technical details, a web map is a sophisticated piece of interactive content, and there is a lot asked of the browser to load each map and each layer. Resource-constrained devices, like phones and tablets, just can't handle the load when multiple maps are loaded at once (whereas even a moderately-powered desktop or laptop rarely has this issue).

The first few slides of each sidecar are pre-loaded at the same time, which works in the vast majority of stories. But when you have several sidecars in adjacent to each other, the current one as well as the ones immediately before and after are also still in memory. This is just too much for mobile device to handle.

I think if you rearrange your story a bit to prevent 6 maps from loading simultaneously, you won't have an issue on mobile devices. Here are a few options you could think about...

• Instead of using sidecars, insert the images and swipe blocks inline in your story so they are all stacked on top of each other. If you still want any of the content items to fill the screen, just hover over them and choose LARGE from the floating toolbar at the top of the block.
• If you want to keep the swipes in a sidecar with floating panels, then you could try one of these...
  • Use one long sidecar but separate each swipe with three images between them, or
  • Move the images to be inline between the sidecars that contain the swipe blocks. This will have the result of separating the swipes so they won't load simultaneously.

You might want to try these options out in another test story to see which one looks/works best for you.

We are thinking about how we can better communicate some of these conditions to authors before or when they are encountered, but it is a challenging issue with several confounding factors so we haven't cracked the code on this one yet.

Hope this is helpful!