Articulate Storyline Scrolling Panel Show Extra Blank Space at the Bottom in html5

Sep 30, 2017


i am using the scrolling panel to my long content. the scrolling panel able to function properly with story.html. when launch with story_html5.html, found that the bottom of the scrolling panel has many white space.

The image on the left has many empty space at the bottom when launch with the browser that does not has the flash player installed/enabled.

The image on the right the scrolling panel has no problem.

I am using Articulate Storyline 3.

I found in the forum most of the discussion is about the scrolling panel is empty or not function, but can't find the topic that has empty space issue.

Thanks so much!


13 Replies
Alyssa Gomez

Hello, Smartfirm!

Are you seeing the extra space at the bottom of scrolling panels when you view the content in Internet Explorer or Microsoft Edge?

Internet Explorer and Microsoft Edge have a known issue displaying scrolling panels in HTML5 output. Both browsers often add extra padding to the bottom of scrolling panels so there can be a significant amount of blank space after your content.

Until Microsoft fixes the problem, you can avoid it by viewing the Flash version of your content or switching to another HTML5 browser, such as Google Chrome or Firefox.

Dylan Hill

It happens in both IE and Edge.

Using Flash isn't an option as it's essentially dead and none of our clients would accept using that. And IE/Edge is the standard browser for most large organizations and as a vendor, we need to adhere to their standards/requirements. We're not in a position to dictate to them what technology they should use. 

It's very frustrating that competing products and other HTML5 development programs we use don't have this issue with scroll panes in IE/Edge. It's isolated to Storyline. Blaming Microsoft for this issue isn't acceptable, especially considering this experience-breaking bug has existed for over a year. 

Alyssa Gomez

Hi Smartfirm,

I certainly understand your frustration, as I know you want to present a product that looks professional in all environments. I'd like to share a bit more about why the scrolling panel appears too large in Internet Explorer and Edge.

When you insert a scrolling panel on a slide, it has a certain height. The contents of the scrolling area have a different (higher) height so that the content can scroll. Internet Explorer and Edge are internally calculating an incorrect (higher still) height for the contents, producing the large extra space.  You can read more about that incorrect calculation in Microsoft's issue report here.

Our team is looking at ways we can get around the calculation error from Internet Explorer and Edge, but we don't want to implement a change that will sacrifice quality and performance on the learner's machine. If we do make changes to the scrolling panel feature in the future, we'll let you know. 

tim deegan

I have to echo Smartfirm's issue and frustration.

Our client, like most large corporations, is locked into using IE or Edge. It used to be an issue only in Articulate Review and went away when the Storyline SCORM was published in their LMS.

Our client recently upgraded their LMS and now the scrolling panels all have extra space at the end, even after publishing. Sure wish you could figure out a workaround as it is making us look unprofessional.

Ashley Terwilliger-Pollard

Hi Tim,

We also documented this here: HTML5 Scrolling Panels Have Unexpected Blank Spaces in Internet Explorer and Microsoft Edge

We've yet to find a solution to implement that doesn't sacrifice quality and performance as Alyssa mentioned earlier, but if that changes this discussion and others will be updated. 

This discussion is closed. You can start a new discussion or contact Articulate Support.