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

I believe this is a known issue with no workarounds at the moment

Hi,

Appreciate if you can share the link of this issue here. so i can inform my customer on this issue.

Thanks.

There is no active bug tracker but this has replies from Articulate staff 

https://community.articulate.com/discussions/articulate-storyline/scrolling-panel-issues-with-360

Hi,

Thanks for the link.

Thanks Phil for sharing that link. 

Chee, I'll also include your discussion here in the report we've filed with our team. That way we'll be able to update you once we've got more information to share. Thanks for reaching out! 

It's so frustrating that over a year and this bug is still there. Trying to explain to our clients that the scroll bars in their course are broken and there's nothing we can do because it's the tool we use that's bugged is not fun. How has Articulate not fixed this yet? 

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.

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. 

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. 

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.

That Microsoft issue link doesn't work anymore btw.

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. 

Hi, I found a simple workaround is to save what you want to add to the scrolling panel as a picture and then drop the picture into the panel. Hope this helps