Lightbox issue with HTML5 output

Hi all,

We have recently discovered an issue with HTML5 output which effects the in-built lightbox feature.

I built what I thought was a pretty nifty glossary which opens as a lightbox slide, allowing me to create each entry as a separate slide as opposed to having dozens of layers. Works perfectly in Flash, however as HTML5 output, the lightbox opens at what seems to be a fixed portion of the slide instead of shrinking the whole slide down to fit (have tried with several different slide proportions, all with the same effect). It seems to include only the top left two-thirds of the slide.

Anyone got any ideas? I've tried a few goofs to try and convince it include the whole slide but nothing appears to help. Issue occurs in Chrome, Safari and Firefox.

I can send a test file, but you can probably create one yourself in about 10 seconds.

25 Replies
Peter Anderson

Hey Greg, welcome to the community!

Can you first make sure you're running the most current update of Storyline - Update 3.

It looks like we last saw this issue prior to the release of Update 2. 

You'll also want to be sure you're following some basic rules to prevent strange behavior:

  • Work on your local drive (your C: drive). Working on a network drive or a USB drive can cause erratic behavior, including file corruption, loss of audio, and other unexpected behavior. 
  • You should also make sure the directory path to your project files and your published output is less than 260 characters (for example C:\Articulate).
  • Avoid using special characters, accents or symbols in your file names.

In the meantime, I'll try to recreate what you're describing in case it's reappeared...


Greg Maguire

Hi Peter,

Thanks for the response.

I can confirm we are using Update 3.

The project I originally noticed this on was not stored locally, however subsequent testing projects were and they all behave the same way. Will test with a super short directory path later today. Please let me know if you'd like me to submit a test project.

Peter Anderson

Thanks, Greg.

Yeah, I wouldn't be surprised at all if you experienced strange behavior on the original non-local file - that definitely causes some strange things to occur. 

I wasn't able to replicate it on my end in any of my tests, so if you continue to see it as an issue, we'd love to learn more about what might be going on, so please do share the .story file at that point. 

Thanks, Greg!

Greg Maguire

Hi Peter,

I have created a test file and submitted it using the link above. Didn't want to send the original project as the file is huge. This one experiences the same issue though. I created an object on the lightbox slide that is exactly 50% of the total slide height & width. As you will see, the lighbox is cutting off the bottom and right side of the slide.

I have tested this one and the original project, operating and publishing to C:/folder/project and even C/:project to rule out that as a potential issue.

Just to clarify, this issue occurs when I choose story_html5.html when viewing the package offline. I have not tested it running in an actual LMS but I'd expect the same behaviour.

Christine Hendrickson

Hi Darren,

From what I can see in Greg's case, it looks like the issue may have been browser-related. What web browser are you using? Have you tried using a different browser?

For example, if you're viewing HTML5 content, I would recommend using Google Chrome. Can you try that out and let us know if you see any improvement?


Harri C

Hi All,

Just to chip in here....

I experienced the same issue with a course a while ago.

The in-bulit lightboxes launched but only showed a portion of the slide or they launched without an exit 'X' button so could not be closed. I experienced this problem in IE, Chrome, Firefox and on Ipad using the Articulate player. However, when I submitted the case my tech support guy at Articulate could not replicate the issue. (All my pc settings were correct/ security settings correct/ working from local drive).

In the end I created 'fake' lightboxes using semi transparent black overlays on the base layer.

However, if anyone does figure out how to resolve this issue I'd be very happy to hear about it, for future courses.

Mark Rieves

I am experiencing the exit 'X' button being cut off and not appearing when viewing a light box on my iPhone.  Once the light box opens, there is no way to close it.  However, the light box works great in IE10 and Chrome.   I did not publish this for the iPad player -- just published with HTML5.

Ashley Terwilliger-Pollard

Hi Mark,

Are you viewing this within mobile Safari? You may find that Articulate Storyline HTML5 content is too large to fit in mobile Safari on devices running iOS 7.

This is a known issue. We're working to fix it in a free software update for Storyline. In the meantime, we recommend viewing the course in one of these environments:

  • Mobile Safari in iOS 6
  • A desktop browser
  • The Articulate Mobile Player app for iPad
Katie Venit

Resurrecting this thread: I had a navigation guide lightboxed to start when the timeline starts on my first slide. Due to Firefox issues, I thought I'd try Julie's suggestion. I set up a trigger on the "faux lightbox" slide, where when you click the X you go back to the previous slide (my first slide). What I'm running into, though, is that when I go back to my original slide, it launches the "lightbox" slide again. Do I have a funky setting somewhere? 

What I would like is for the "lightbox" slide to only come up the first time, even if you go back to that slide from elsewhere in the project. I only need them to see the navigation guide once, but I want it linked to the player.

Christine Hendrickson

Hi there Katie,

Are you able to post your .STORY file here, so we can take a look at what you already have so far? If the file's not too large, you should be able to attach it to your response. This would make it a little easier for us to see if there's just a trigger missing, etc., and not an issue with HTML5.


Paul Durston

I seem to have fallen victim to the "unable to close lightbox" issue.  I was running update 3 but have just updated to 5 and that's solved most of the display issues I was having but I'm stuck with this lightbox problem.

Everything works as expected but as soon as the HTML5 output is viewed on an iPhone (iPad is fine) the lightbox opens but opens very large with the screen focussing on what I think is the dead centre of the lightbox.

If you flip the iPhone between portrait and landscape orientation (and you're quick enough!) you can just about see the lightbox does scale correctly and does load at the right size for a split second (and you can see the red 'x') but then reverts to being huge.

I cannot scroll to find the red 'x'.  Zoom seems to have been disabled so I can't zoom out.  The only way to close the lightbox is to reload the entire URL and start again.

I'm currently running a trial version to prove the software to people who may purchase it.  Trial expires soon - help!

Paul Durston

Ashley Terwilliger said:

Thanks Paul for sharing that here - and I see where you're working on this in a case with John Say and he's reported it to our QA team. I'll attach this thread to the QA report so that we can update both places if further information becomes available. 

Thanks Ashley.  John confirmed that the team have replicated the issue.  I've asked John if it's possible to tell me what causes the problem.  If I can fix it at my end by editingindividual files I can share that fix with you guys.