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

9 Replies
Ben McKenna

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:

  1. Open app.min.js in your course output folder
  2. Search for 'shouldSwipe:function(e){' and replace all of the text within the curly brackets with 'return false'
  3. Search for 'shouldInitPinchZoom:function(){' and replace all of the text within the curly brackets with 'return false'
  4. 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.

Jose Tansengco

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!