SL3 scrolling text includes lots of extra space (IE HTML5)

Mar 20, 2018


During testing, I'm noticing that there is a ton of extra blank space in the scrolling text area. This is only happening in IE HTML5.

In the photo below, you can see where the text ends. And you can see how much more there is still yet to scroll! In all other testing, the scroll bar stops, and the text stops scrolling, as it reaches the bottom of the text box... as it should.

Anyone else come across this?

It's a SL2 project that I converted to SL3. Did not encounter this issue in SL2.

Thanks for any insight.

20 Replies
Karen Siugzda

Thanks for the input. Upon implementation and testing, I am discovering that while the CSS change may fix the IE scrolling issue, it is also affecting other elements.

In the image below, you'll notice what is happening.

On left is a sample of the project after I modified the CSS as noted above. You'll see the left and bottom of the shape are affected and the shadow is cut off. 

On the right is how it is supposed to look.

Hopefully Articulate staff can chime in and let us know if a fix is coming for the IE scrolling bug.

Leslie McKerchie

Hi Karen,

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.

Steven Walsh

Arkadiusz’s code works great, but I prefer not modifying files after publishing. I found that by using jQuery I can implement the fix on the page with the scrolling panel. I put the following code in a JavaScript trigger that executes when the page or layer containing the scrolling panel starts.

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

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

The only down side to using JavaScript is that it doesn’t work in preview mode. Thanks to Arkadiusz for sharing his code!

Steven Walsh

A couple things.  SL 360 as of 2020 does not include jQuery, so if you want to use that functionality, you have to load it yourself.  Also, this appears to only be an issue with IE, Chrome & the new Edge do not have this problem.

In this instance, I would avoid jQuery and use the following code if you only have one scroll box on the page.

// works for one
document.querySelector(".scrollarea-area svg").style.overflow = "hidden";

If you have more than one scroll box, you will need to do something like this.

// works for two
document.querySelectorAll(".scrollarea-area svg")[0].style.overflow = "hidden";
document.querySelectorAll(".scrollarea-area svg")[1].style.overflow = "hidden";

Hope this helps,

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