I get a lot of extra space at the bottom of my content in scrollbars. This only happens in IE. Chrome works fine. Here is a screencast so you can see what I'm talking about.
Hi there Steve, thanks so much for taking the time to record the issue! That was really helpful.
In Storyline 360, we are tackling an issue where extra space appears at the end of scrolling panel content when viewed in Internet Explorer with HTML5. That seems to exactly match what's going on in your file.
Until we find a fix, is it possible for you to recommend using other browsers besides IE?
Thanks again for letting us know what's going on, and I'm sorry it's causing you headaches!
Thanks for reaching out and letting us know that you are being impacted by this as well. We are tracking user impact to best prioritize issues as you can see here, but I do not have an update at this time.
The only known workaround is to use a different browser.
Our team is still looking into this issue, but it's seeming more and more like a limitation of IE based on they deal with the text overflow compared to other browsers.
We'll let you know once we have been able to nail that down a bit further.
Sorry to hear that you've run into this issue as well.
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.
Note: You'll also see extra space at the end of scrolling panels in CD-published output since it relies on Internet Explorer.
We've continued to push back on Microsoft to fix this behavior, and we'll keep you posted about that here.
As for Chrome/blurry text - our team is aware how much trouble this is causing you all and we're continuing to evaluate and test a variety of solutions. Once we're able to roll one of those out we'll be certain to let you know in that discussion.
A solution to this extra blank issue is to create you scroll box in html and to insert it as a web object in Storyline. That way IE can handle the scrolling panel without extra blank. Of course you'll need to have some html skills and it would be harder if you have more designed content with shapes. But for a simple text box, it works well !
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.
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.
I am having the same issue with the scroll panels. We recently upgraded to 360 and are having our clients use Articulate Review for their alpha reviews. 360 Publishes direct to Review and doesn't create an output file that I can see/find, so I'm not sure how to try the fix Jamie mentioned above.
Does anybody have any other thoughts on a fix for this?? Using another browser is not an option for our corporate client with 100,000 employees who were just pushed Windows 10 and Edge.
I'd hate to have to go back to Storyline 2, and try to get a refund for our team on 360, but this could be a deal breaker if we can't publish course without bad scroll panels!
Thanks for sharing your experience with us. It sounds like you're seeing extra space at the bottom of the scroll panels in Articulate Review when viewed in Internet Explorer, is that right?
You may be able to try the fix Jamie mentioned above if you publish for Web or LMS instead of for Articulate 360. I don't have experience making changes to the CSS myself, so hopefully Jamie can chime in and share some more tips with you.
Thanks for the quick reply. Yes, seeing extra space on every scroll panel in our new 360 courses whether in IE or Edge which are what our corporate clients are forced to use.
If I publish to Web or LMS how does the client review it Articulate Review which is one of the main reasons we upgraded to 360?
If you want to use Articulate Review, then you'll want to publish to Articulate 360.
It sounds like your clients are limited to using Internet Explorer and Microsoft Edge, and unfortunately this is an issue with those browsers.
Until Microsoft fixes the problem, you can avoid it by viewing the Flash version of your content. Have you tried publishing with Flash Only to see if there's an improvement?
Oh Alyssa, you are ROCK STAR! Yes, publishing with Flash Only resolved the scroll panel extra space issue!
Now if you could use your star power to find a way to bookmark courses in Review so our clients don't have start there reviews over from scratch when if they log off, I'd name my next five children after you!
You're hilarious, Tim! I bet having a bunch of Alyssa's running around would get confusing really fast! 😆
Now, on to bookmarking courses in Review. While I don't have the star power to make that happen, I can pass along your request to our Product team as a new feature idea. Others have shared a similar request, so you're not alone in this! If we add resume functionality to Articulate Review in the future, I'll be sure to let you know.
Is there any news on this? I am publishing to Review so my stakeholder can review, but our browsers do not support Flash so I cannot use the Flash only option. I use Chrome but my stakeholders us IE and are still getting the space at the end of scroll bars.
This thread and others indicate that this has been an issue for a long time.
If there is a change to the css that can be implemented to fix this can this be included within Storyline's publishing?
I have looked at adjusting the css in main.min.css as Alice outlined above and it looks like the scripting in the css may have changed since Alice's post.
For most users publishing in Flash is no longer an option. For many customers/stakeholders/end users IE is the only browser they use.
Again as this is a long standing issue can we get a clear indication of when it will be addressed and also some details from Articulate support of a CSS workaround/fix that will work until they can update Storyline.
27 Replies
Hi there Steve, thanks so much for taking the time to record the issue! That was really helpful.
In Storyline 360, we are tackling an issue where extra space appears at the end of scrolling panel content when viewed in Internet Explorer with HTML5. That seems to exactly match what's going on in your file.
Until we find a fix, is it possible for you to recommend using other browsers besides IE?
Thanks again for letting us know what's going on, and I'm sorry it's causing you headaches!
That's good to know that it not something I'm doing wrong. Unfortunately I can't control what my client's use.
I completely understand, Steve. I'll notify you as soon as we have a fix!
Any update on this issue because i am facing same issue.
Hello Ramjeet and welcome to E-Learning Heroes :)
Thanks for reaching out and letting us know that you are being impacted by this as well. We are tracking user impact to best prioritize issues as you can see here, but I do not have an update at this time.
The only known workaround is to use a different browser.
Client have only IE in their system so please provide any solution any code snipped or anything..
Thanks in advance.
Hi Ramjeet,
Our team is still looking into this issue, but it's seeming more and more like a limitation of IE based on they deal with the text overflow compared to other browsers.
We'll let you know once we have been able to nail that down a bit further.
Hello,
was any progress made on this issue because we are still facing this problem with SL360 and IE.
Thank you!
TK
Hi Thomas and welcome to E-Learning Heroes :)
Sorry to hear that you've run into this issue as well.
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.
Note: You'll also see extra space at the end of scrolling panels in CD-published output since it relies on Internet Explorer.
Hey Leslie,
thank you for responding on this issue.
Flash is no option since it has been deactivated on our customers devices for security reasons.
Our customer is using IE and Chrome but Chrome is neither an option because we are facing the problem of blurry text and images as discussed elsewhere in the community (https://community.articulate.com/discussions/articulate-storyline/fuzzy-text-and-images-sl360-in-chrome?page=6).
I know you are working hard on solving both issues but we are running out of time because of our contractual promises.
Hi Thomas,
We've continued to push back on Microsoft to fix this behavior, and we'll keep you posted about that here.
As for Chrome/blurry text - our team is aware how much trouble this is causing you all and we're continuing to evaluate and test a variety of solutions. Once we're able to roll one of those out we'll be certain to let you know in that discussion.
Hey!
A solution to this extra blank issue is to create you scroll box in html and to insert it as a web object in Storyline. That way IE can handle the scrolling panel without extra blank. Of course you'll need to have some html skills and it would be harder if you have more designed content with shapes. But for a simple text box, it works well !
I hope Microsoft will work on it anyway...
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.
Thank You Jamie, This is work
I am having the same issue with the scroll panels. We recently upgraded to 360 and are having our clients use Articulate Review for their alpha reviews. 360 Publishes direct to Review and doesn't create an output file that I can see/find, so I'm not sure how to try the fix Jamie mentioned above.
Does anybody have any other thoughts on a fix for this?? Using another browser is not an option for our corporate client with 100,000 employees who were just pushed Windows 10 and Edge.
I'd hate to have to go back to Storyline 2, and try to get a refund for our team on 360, but this could be a deal breaker if we can't publish course without bad scroll panels!
Hi there Tim,
Thanks for sharing your experience with us. It sounds like you're seeing extra space at the bottom of the scroll panels in Articulate Review when viewed in Internet Explorer, is that right?
You may be able to try the fix Jamie mentioned above if you publish for Web or LMS instead of for Articulate 360. I don't have experience making changes to the CSS myself, so hopefully Jamie can chime in and share some more tips with you.
Hi Alyssa,
Thanks for the quick reply. Yes, seeing extra space on every scroll panel in our new 360 courses whether in IE or Edge which are what our corporate clients are forced to use.
If I publish to Web or LMS how does the client review it Articulate Review which is one of the main reasons we upgraded to 360?
Hi there Tim,
If you want to use Articulate Review, then you'll want to publish to Articulate 360.
It sounds like your clients are limited to using Internet Explorer and Microsoft Edge, and unfortunately this is an issue with those browsers.
Until Microsoft fixes the problem, you can avoid it by viewing the Flash version of your content. Have you tried publishing with Flash Only to see if there's an improvement?
Oh Alyssa, you are ROCK STAR! Yes, publishing with Flash Only resolved the scroll panel extra space issue!
Now if you could use your star power to find a way to bookmark courses in Review so our clients don't have start there reviews over from scratch when if they log off, I'd name my next five children after you!
You're hilarious, Tim! I bet having a bunch of Alyssa's running around would get confusing really fast! 😆
Now, on to bookmarking courses in Review. While I don't have the star power to make that happen, I can pass along your request to our Product team as a new feature idea. Others have shared a similar request, so you're not alone in this! If we add resume functionality to Articulate Review in the future, I'll be sure to let you know.
Jamie,
Thanks for posting this; it's exactly what I needed today.
Hi Alyssa,
Is there any news on this? I am publishing to Review so my stakeholder can review, but our browsers do not support Flash so I cannot use the Flash only option. I use Chrome but my stakeholders us IE and are still getting the space at the end of scroll bars.
Hi Alice,
You can add below code in main.min.css file
scrollarea-area > div{overflow:hidden;}scrollarea-area > div{overflow:hidden;}
Main.Min.css file found in following location
html5/lib/stylesheets in the Storyline output directory.
Why doesn't Storyline change its output to include this change to the css?
Hi Alyssa and Ashley,
Can you update us on this issue?
This thread and others indicate that this has been an issue for a long time.
If there is a change to the css that can be implemented to fix this can this be included within Storyline's publishing?
I have looked at adjusting the css in main.min.css as Alice outlined above and it looks like the scripting in the css may have changed since Alice's post.
For most users publishing in Flash is no longer an option. For many customers/stakeholders/end users IE is the only browser they use.
Again as this is a long standing issue can we get a clear indication of when it will be addressed and also some details from Articulate support of a CSS workaround/fix that will work until they can update Storyline.
This discussion is closed. You can start a new discussion or contact Articulate Support.