Extra space in Scroll box when viewing course in IE

Apr 11, 2018

Hi,

I am experiencing an issue in SL360, where there is a whole bunch of extra (blank) space in the scroll box. This issue appears only when the course is viewed in Internet Explorer. I would appreciate any solution to this bug as I need it for an urgent project I am working on.

Image attached for ref.

13 Replies
Jonas Brolin Hjortsberg

Hello,

any news or workaround on the issue? We have had customers complaining recently on the problem. The "bug" has been around for quite some time now.

It works in Storyline 2. I tested to publish a course with scroll in Storyline 2, and in Internet Explorer there was no extra space (In edge the page did not work). Of course we can not use Storyline 2, but maybe you can see what differs from the versions.

Ashley Terwilliger-Pollard

Hi Jonas,

The difference between SL2 and SL360 is that with the newer version you have greater support and functionality for HTML5 output, but sadly that's where this issue occurs.

Since SL2's HTML5 output was not supported in IE11 or Edge, the output should be defaulting to Flash and showing the scroll bar as we'd expect.

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

Dan Bartell

It looks like someone may have found a workaround in the thread here:

[Amit kumar]"You have to update some codes in "mobile/player.css" file.

Add "display: none !important;" on ".modalfence" Class.

I hope this will help. :) "

...and maybe another variant of the same solution in the thread here:

[Jamie Liske]"I found that altering the main.min.css file found in html5/lib/stylesheets in the Storyline output directory can fix this problem. Specifically, you need to update the overflow property of the slide-object svg element.

Original setting

.slide-object svg{

position:relative;
display:block;
overflow:visible;
pointer-events:none

}

Updated setting

.slide-object svg{

position:relative;
display:block;
overflow:hidden;
pointer-events:none

}

I can't say for sure if this change adversely affects anything, but it does fix the IE scroll panel issue while maintaining the same functionality in other browsers."

...and maybe even another workaround in the thread here:

[Jan Friml]"I have found an overcome for this issue.

It seems to me that this white extra space underneath the text in the scrolling panel has the same height as the text itself. Looks like the same number of lines of text you have in the text box is duplicated under the text as empty lines, which causes the white space.

The longer the text, more white space underneath. 

The solution is therefore simple - split the text into separate text boxes, only couple of text lines each (one or two sentences, maybe one paragraph max.). Remember the last "paragraph" (at the very bottom) must have only one line of text, otherwise it creates the white space again.

Hope this helps :)"

Staff: Based on these workarounds, it appears clear to me that this is either a) NOT a problem with IE/Edge, but rather Storyline, or b) genuinely a problem with IE/Edge that could be easily dealt with in an update to Storyline. Given the number of people running in to this and the number of eLearning clients still using these browsers either by default or mandate, it seems that this issue merits a second look.

Thanks!

Crystal Horn

Hey folks. I'm excited to let you know that we just released update 23 for Storyline 360! It includes new features and fixes - check them all out here.

We fixed some modern player issues, including blank space below slides that resulted in unnecessary scroll bars and sometimes dark rectangles at the bottom of content.

Here’s how you can update Storyline 360 to take advantage of everything the latest release has to offer. Let me know how you make out!

Alyssa Gomez

Hi LIBRIX,

The issue you're seeing is a bit different than the bug Crystal mentioned earlier in this discussion. The bug we fixed in Update 23 related to extra space below the entire slide, which caused a dark rectangle at the bottom of the content.

What you're seeing is extra white space at the bottom of a scrolling panel, is that right? 

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.

CT  Learning

This is not my fix but I found it in another thread.  basically what this does is implements the css fixes mentioned above, but on the actual slide within storyline so you do not have to do anything after publishing. 

Add this in a javascript trigger when the slide or layer loads.  it works perfectly and so easy to add right within storyline.

//jQuery/css so Scrolling Panel displays correctly in IE and Edge

$(".scrollarea-area svg").css({"position": "relative", "display": "block", "overflow": "hidden", "pointer-events": "none"});

 

Also storyline.  fix this bug its been around for over a year.

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