Scrolling panel won't scroll on iPad with HTML5

Dec 05, 2013

Hello,

I have a scrolling panel that works exactly as it should on desktop browsers. It does not, however, work in Mobile Safari or in Chrome for iOS6 and iOS7.

I've published with Storyline Update 4 and I've had one of my colleagues publish from his computer using the same update, and we both see this problem.

Can anyone please share ideas for what might be happening that's wrong?

Below is a screenshot of the inside of my course. It appears everything is set up correctly. The internal setup matches that of other courses that are correct.

Thanks so much!

Nick

23 Replies

Phil Mayor
Hero

over 10 years ago12/05/13 at 11:32 am (UTC)

Use two fingers to scroll in html 5

Nick Elkins
Author

over 10 years ago12/05/13 at 11:33 am (UTC)

Thanks, Phil.

Susan Jones

over 10 years ago12/05/13 at 11:35 am (UTC)

It's working in other browsers just not the articulate player on ipad? I know that there are issues with drag in HTML5 - when exporting from flash (action script) - did you create the scroll in flash?

Nick Elkins
Author

over 10 years ago12/05/13 at 11:41 am (UTC)

No, we haven't tested in the Articulate player, as the client's LMS prohibits its use.

It is NOT working in either browser we've tested in on iPad.

And the scroll is created using the standard Storyline scrolling panel object with a text box inside.

Ashley Terwilliger-Pollard
Staff

over 10 years ago12/05/13 at 12:02 pm (UTC)

Hi Nick,

Would you be able to share your .story file with us so we could test this out?

Nick Elkins
Author

over 10 years ago12/05/13 at 12:05 pm (UTC)

Hi Ashley,

The file is uploading now. It's 78MB on a slow internet connection, so it may take a little while. Thanks!

Nick

Nick Elkins
Author

over 10 years ago12/05/13 at 12:15 pm (UTC)

Case number is 372835. Thanks, everyone!

Ashley Terwilliger-Pollard
Staff

over 10 years ago12/05/13 at 12:27 pm (UTC)

Thanks Nick, I'll follow along in your case as well!

Nick Elkins
Author

over 10 years ago12/05/13 at 8:29 pm (UTC)

Thanks to Phil (above) and Articulate support on my support case for giving the necessary information for this to work.

Nick Elkins
Author

over 10 years ago12/05/13 at 8:33 pm (UTC)

Actually - I have a followup question. I have other courses that were published previously that the scrolling panels work as they should in HTML5 in iOS6 and iOS7. But these particular courses were most recently published using Storyline update 3.

Is this a limitation of the way Storyline Update 4 and HTML5 work together?

Thanks!
Nick

Ashley Terwilliger-Pollard
Staff

over 10 years ago12/06/13 at 5:20 am (UTC)

Thanks Nick for the update. The course's that Miker shared with you, you were able to use the scrolling panel with those using the two finger method, correct? There were some fixes in update 4 that were in regards to HTML5 output for iOS7, which is likely why you're update 3 courses may behave a bit differently than update 4.

Nick Elkins
Author

over 10 years ago12/06/13 at 5:48 am (UTC)

Thanks, Ashley. That does make sense.

Nick Elkins
Author

over 10 years ago12/06/13 at 5:51 am (UTC)

Is it fair to say that the changes to Update 4 would also affect HTML5 output for iOS6? I'm having the same problem with courses published in Update 4 on iOS6. Thanks!

Ashley Terwilliger-Pollard
Staff

over 10 years ago12/06/13 at 6:14 am (UTC)

I haven't seen that, and don't have an iOS6 system I could test on, but if you'd like to share that as a part of your open case with Miker, he may be able to test to confirm that.

Rebecca Hogue

10 years ago02/08/14 at 6:57 pm (UTC)

I'm having a similar problem. My scroll bars are not appearing in the HTML 5 version run under mobile Safari (iPad). I've tried two finger scrolling but that isn't working either - but it would still be a problem, as the user will need to see the scrollbars.

Ashley Terwilliger-Pollard
Staff

10 years ago02/10/14 at 6:35 am (UTC)

Hi Rebecca,

The scroll bar won't be seen until the user begins scrolling, and the two finger scroll can be a bit particular. If you're unable to get it working we're happy to take a look at your course to see if there is something else occurring. If you could share the link to a published course and a copy of the Storyline file we're happy to take a look. If you'd prefer to share privately, please let me know and I can send directions to you on how to share it with me.

Till Then

10 years ago02/11/14 at 5:43 am (UTC)

Wow great to hear that it works and it was not just me !

Two fingers of course !

Gayla Keesee

almost 10 years ago04/29/14 at 5:11 am (UTC)

Not to sound stupid or anything, but can anyone explain how the two finger method works? Do we need to tell our learners to use this method if they are using an iPad or iPhone?

Ashley Terwilliger-Pollard
Staff

almost 10 years ago04/29/14 at 6:22 am (UTC)

Hi Gayla,

You'll want to let your learners know to use the two finger method, as it's not the "normal" scroll within the iPad. You could use the information below from this support article:

When viewing HTML5 content in mobile Safari on an iPad or iPhone, use two fingers to scroll through content in scrolling panels.

Tip: Mobile Safari doesn't show scroll bars until you begin scrolling.

byron tik

almost 10 years ago07/08/14 at 8:06 pm (UTC)

my scrolling panels appear not to be working at all when I test the html5 version in google chrome in windows, I am trying to scroll to no avail.

regards Byron

---

Ok I just noticed that the HTML5 scroll entry field won't work in conjunction with additional layers, as soon as i click an extra layer I won't be able to click the scroll bars anymore, unless.......

I hide the layer

Ashley Terwilliger-Pollard
Staff

almost 10 years ago07/09/14 at 10:14 am (UTC)

Hi Byron,

It sounds like your layer is open and hiding the original stuff on the base layer - have you set the slide layer properties to stop the user from clicking on the base layer? You'll either want to hide the layer or allow the user to click things on the base layer.