Fix Storyline HTML5 Issues in Firefox

Cross-browser compatibility is a huge responsibility for those of authoring eLearning content.  Not only must everything work, everything has to function in every browser configuration since the dawn of time..!

Well, not really. But sometimes it may feel that way, when our clients and stakeholders request support for a specific browser or environment.

Recently, I rolled out some content that had various inherent media types (custom fonts, images, audio, video, animations, interactions, quizzes, etc.), multiple programming code-types (HTML5, CSS, LESS, JavaScript, jQuery, Ajax, JSON, CGI, RESTful API, PERL, et al), and all within a closed system (i.e., internal secure network accessed via VPN).

You know what’s coming next: everything was fully-functional, working just fine…then, pow!…the client informs me that there are technical issues for one tester, using Mozilla Firefox on a Mac machine.

This particular issue occurred only on the quizz pages, which were created via Storyline. These pages were displayed in an iFrames, held in a Bootstrap-powered ‘wrapper’, and displaying the HTML5 publish only. The Storyline player appeared, complete with ‘Next’ button, but no content was displayed on the title slide. No issues occurred when going to the actual quizz questions, by selecting the ‘Next’ button…just the first page.

After reviewing the console log (which wasn’t much help), Googling for similar issues, and just plain head-scratching, I figured out what is causing these problems…at least, I think I have.

The culprit appears to be specialized font used on the title slide of the quizzes. While Storyline is accurately (more-or-less) rendering these special fonts out for HTML5/canvas (i.e., on-screen), whatever CSS or pseudo-font it creates to make the text look like that font is causing display issues somehow.

For one Firefox user.
On a Mac.
In a closed, VPN-only system.

Okay. I digress. Back to the fix. 🙂 

Luckily, the blank-screen issue occurred for me on one of several tests on a Windows machine running Firefox. The log files were full of CSS-type errors – mostly ones I’d associate with text/font decoration – background; border; shadow; and even one mention of Storyline-created, “font.js”.  While some initial Googling of these errors didn’t produce much insight, many of them pointed to some possible CSS issues, here and there, especially on Firefox browsers.

With that, I began experimenting with the Storyline source file.  First, I created a brand-new title slide with all new text boxes and images; it didn’t help…still had blank screen and errors. Next, I ensured there was no overlap (of each text box on the Storyline slide); this had no effect.  Then, I made sure my (authoring) computer had the correct font installed and available for Storyline to use/embed within its published product. Again: no change.

The fix, while a simple one, is a clumsy way to get things done; a least in my opinion.

By right-clicking the text box in Storyline and I selecting, “Save as Picture”, I exported the text-block as a PNG file with transparency. After deleting the text containing the special font, I replaced these elements with the new images and republished.


The result: no errors and the title slide instantly shows, with the new images that look like text (in the correct, specialized font).

In the end, this means I’ll likely need to re-publish each Storyline assessment, making sure we swap the images (made from original text/font) for the existing title text.  Overall this a minor edit and change; nothing that can’t be done in an afternoon publish session. Still, this means any (potential) future changes to the title text – especially any future changes requested by the client – will need to recreate the above swap process.

However, repeating this swap beats the alternative: displeasing a client because of an outlier test browser configuration. 🙂