Web Object Sizing-Scaling

I do not know if this is a bug or possible new feature. When viewing a course that contains a web object on an iPad or iPhone, the web object does not resize or scale. The web object does resize (scale) when viewed on a computer. The web object points to a folder (web\index.html). In this case, the web object opens a game that was built in Phaser.

Any ideas?

42 Replies
Crystal Horn

Hi there Tim!  Our comparison of Flash, HTML5 and Articulate Mobile Player output indicates that using a web object that fills the slide will interfere with full screen mode in the Mobile Player output (under Media > Web Objects, hover over the AMP yellow box).

Does that sound like it matches your situation?  Is the output any better if you were to view it using Mobile Safari (HTML5 output without the AMP publishing option checked)?

Tim Wicks-Frank

Hi, when publishing the course as HTML5, content that is linked to the web object does not scale (resize) when viewed on an iPhone or iPad. See attachment. We cannot require that our learners use the mobile player app. Any ideas how make content scale in the web object when viewed on an iPhone or iPad? Thanks

Tim Wicks-Frank

Hi, yes, I'm viewing the HTML5 in Safari on an iPad and iPhone. Sorry, we're not permitted to share this type of content. It looks fine in Windows (IE, Chrome, and Safari) or on an iMac. When viewing the course that contains a web object on an iPad or iPhone, the web object does not resize or scale. Thanks

Crystal Horn

Morning, Tim.  Let me ask a couple of things:  When you are viewing the course on a desktop, are you specifically testing the HTML5 content?  Either you could launch directly from the HTML5 launch file, or disable Flash in an HTML5 supported browser (see "Viewing Content").

Also, does this behavior occur with any web object?  Or is it specific to the build-a-baconator object?

Tim Wicks-Frank

Crystal, we tried testing both Flash and HTML5 versions on all devices. It seems that we have narrowed the issue to iOS (and even Mac OSX to an extent). The Phaser game accessed from the web object works fine on Android devices and Windows-based machines.  Please let me know if you have any ideas. We're getting into the weeds and not seeing easy fixes yet. I'll let you know if we have more discoveries. Thanks, Tim

Tim Wicks-Frank

Hi Ashley, unfortunately that approach does not enable Apple users to view this material. Based on other forum entries, it looks as if this issue was identified about three years ago. Since this has been an issue for awhile, perhaps Articulate could place a higher priority on a resolution. Thanks for the suggestion.

Tim Wicks-Frank

Ashley, iPad and iPhone users see no error when viewing the web object. When publishing the course as HTML5, content that is linked to the web object does not scale (resize) when viewed on an iPhone or iPad.  See attachment.  Interestingly, when linking to the same content from a web object in an Adobe Captivate project, the web object scales appropriately for iPad and iPhone users. It would seem that Captivate handles iframes differently than Storyline. Thanks

Tim Wicks-Frank

In the "For What it's Worth Department", here's a work-around for our web-object issue.

See attached screenshot for results.

In the Storyline 2 output “mobile” folder, make the following changes to the “player_compiled.js” file:

Change
<iframe class='item webobject'>
To
<iframe class='item webobject' scrolling='no'>

Change
<iframe class='item webobject unhideable'>
To
<iframe class='item webobject unhideable' scrolling='no'>

The Phaser game (Storyline web-object) sized correctly inside the Storyline player when scrolling was turned off in the “player_compiled.js” file. 

The Phaser game (Storyline web-object) sized incorrectly outside the Storyline player when scrolling was not defined in the “player_compiled.js” file.

Thanks,
Tim