Zoom interaction on mobile phone breaks slide in SL360 version, works fine in SL2

Mar 26, 2018

Hi, I've been running into an issue with zoom regions published in SL 360 when accessed via a mobile phone (this issue is not happening in SL2).

Once the zoom region on the slide has been zoomed into, the user may "break the slide" by accidentally touching the screen on the mobile phone: Touching the screen changes the position of the zoom, and the user is not able to re-focus into the designated zoom region anymore. Worst case would be if the user misses a crucial navigation button that is not available anymore after accidentally touching the screen.
Please note: Slide navigation via gestures has been disabled for this slide. So I assume this could not be responsible for this behaviour.

This issue does not happen when publishing a slide with a zoom region in SL2. The zoom region stays fixed in the SL2 published version, even when the user touches the screen.

I've tested this behaviour by uploading the slides to ScormCloud, and accessing the course on an iPhone as well as on an Android phone. Both phones experience the issue.

I have attached the SL2 and SL360 version of a single slide with a zoom region. The dashed/dotted rectangles in these example files show where the zoom region should be. When testing the 360 version on a mobile phone, the rectangle will be cut off after interacting with the screen once zoomed in.

Any help with this would be much appreciated :-)

zoom_region_360.story
Zoom_region_SL2.story

9 Replies

Alyssa Gomez
Staff

6 years ago03/26/18 at 9:56 pm (UTC)

Hi Natascha,

Thanks so much for bringing this up. I tested your file on a mobile device, and I saw the same problem you described. I'm going to share this with my team so we can begin looking at next steps. As soon as I have an update, I'll let you know!

Natascha Matthes

6 years ago04/02/18 at 10:36 pm (UTC)

Great, thank you very much, Alyssa! We are using zoom regions a lot in our existing SL2 projects which we are in the process of updating to 360. It would be a huge help if this could be fixed.

Phil Mayor
Hero

almost 5 years ago07/04/19 at 3:23 pm (UTC)

I am still experiencing this on Mobile is there a fix?

almost 5 years ago07/04/19 at 10:23 pm (UTC)

Hey Phil,

We managed to prevent zoom regions from 'breaking' on mobile devices by editing the app.js file and removing touch gestures completely. The issue stems from the fact that, on mobile devices, users can pinch to zoom, and navigate by swiping left/right... Normally, this would be fine, but the way the Storyline player is scripted, it doesn't account for the fact that the slide offset can change with zoom regions - so whenever the Storyline player attempts to 're-centre' the slide, it always goes back to the (0, 0) coordinates.

If you are fine with completely disabling pinch-to-zoom and swipe-based navigation, you can disable them by making the following changes to the published output:

Open app.min.js in your course output folder
Search for 'shouldSwipe:function(e){' and replace all of the text within the curly brackets with 'return false'
Search for 'shouldInitPinchZoom:function(){' and replace all of the text within the curly brackets with 'return false'
Save and rezip course

This is also related to the reason why the loading overlay sometimes disappears on mobile devices. Normally the loading overlay covers the whole slide, but whenever a user swipes left/right, the whole loading overlay gets shifted to beside the current slide (so that the user sees it after swiping). The only issue with this is that if the user ever returns to using button-based navigation, the loading screen is stuck off the slide forever until they re-launch the course.

Not to be negative, but I reported this in full technical detail Articulate Support over a year ago, and they still haven't acted upon fixing it. Hopefully this helps you out in the meantime.

almost 5 years ago07/05/19 at 5:55 am (UTC)

Thanks Ben, that may work. Really appreciate this :-)

Sent from my iPhone

Brian Cook

over 2 years ago08/03/21 at 7:20 pm (UTC)

Hello. I am experiencing this currently, and I don't really have the option to do the above fix. Mine is being used as a simulation. Is there any way to reset each slide, so at least the effect doesn't linger?

Any actual fixes to this?

Thanks!

Brian Cook

over 2 years ago08/06/21 at 2:54 pm (UTC)

over 1 year ago11/07/22 at 11:44 am (UTC)

I'm currently experiencing the same issue. Is there a fix planned for this that would save me editing the javascript after I've published the course?

over 1 year ago11/07/22 at 4:56 pm (UTC)

Hello David,

Sorry to hear that you ran into this issue as well.

Would you be willing to share a copy of your project file here or in private through a support case, as well as details of the mobile device that you're using to view your course, so we can check what's happening? We'll delete it when we're done testing!