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.
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. 🙂
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.
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).