Unwanted scrollbar issue when using iFrame in Firefox

Aug 10, 2018

Hi Heroes, 

I am publishing a course to HTML using Articulate 360. I'm using the new/modern player. When I upload the course to our LMS, which uses an iFrame to embed the course, a scrollbar appears to the right, along with some pointless gray space at the bottom (see screenshot below).

scrollbar

This is only happening in Firefox. I don't have this issue when I view the course on Chrome. 

Any help/suggestions would be very appreciated.

Thank you.

29 Replies
Claudia Keefer

HI Leslie, 

It is a huge file so I haven't tried publishing in SCORM cloud. Since it seems to be related to the iFrame, I would also guess that it's related to our LMS. And yes. It is only happening in Firefox.

From what I remember, publishing to SCORM cloud defaults to full screen mode. Doesn't it? I will take a look just in case, though. 

Thanks!

Leslie McKerchie

Hi Claudia,

Thanks for the additional information and reaching back out.

I did a bit more digging and I actually see this issue has been reported and we are tracking user impact.

We have been able to replicate as well, but do not know of a workaround outside of using a different browser.

I'm adding this conversation to the report so that we can update you here when we have additional information to share.

Scott Dinho

To add to the data set, we were recently testing the modern player to transition over to it and noticed the same issues as described in the original post when viewing the courses on Firefox (ESR update 52.5) and IE (V.11.0.96) in our LMS (Saba Cloud). These do not occur when viewing the same courses in the LMS when using Chrome (current version).

We are going to hold off on moving to the modern player until this resolved as a large number of our learners use IE as their primary browser.

Scott L

Hello folks,

I am experiencing the same issue here. I've found that it's using Firefox v62 (I'm on Windows7). I do not have the issue using Chrome v69 or IE 11.

I'm using the Modern player.

This happens with both the Web output (viewing locally, or on a web server) and the LMS output (in an LMS). It's not an LMS issue in this case.

The content below is just black space.

From a technical perspective, I see that the HTML <body> element has the CSS 'body.is-desktop' with the CSS rule 'overflow: auto', and turning that off (using Firefox developer tools) or changing to hidden suppresses the scrollbar.

This seems to be a technical issue either with a recent version of Firefox that was released, and/or might be something that Articulate has to deal with via an update to the player HTML/CSS/JavaScript.

My thoughts would be to set 'overflow: hidden', since there's no need for any HTML scrolling of the Storyline player... but that's a matter for the super-smart techie folks at Articulate ;-)

Here's a related thread going on: https://community.articulate.com/discussions/articulate-storyline/unwanted-scrollbar-issue-when-using-iframe-in-firefox

Modren player Firefox scrollbarModren player Firefox scrollbar b

 

Katie Riggio

Thanks for the extra detail, Scott D.! Ah, interesting that no scrollbar and grey area appears when testing in SCORM Cloud. Are you still testing in Firefox 52.5, or the latest 62 version? Mind sharing your .story file with our team so we can do a deep dive to confirm?

Hi there, Scott L. Thanks for joining the conversation, and for sharing that nifty technical wisdom! I've added your environment to this issue's report and will share those handy screenshots with the team. As soon as we have more information, I promise we'll send everyone here an update. So sorry for any headaches!

Scott L

I have been able to make a successful edit to the Storyline output files to fix the scrollbar issue for my courses.

Note that this is just a temporary work around until there's a legitimate update. IF things work out well,m this post will be invalid in the next week or so ;-)

For those who need to get courses into production "today" and are troubled by this issue, here is a "hotfix" that involves making a manual edit to a CSS (stylesheet) file. This would have to be done every time you re-publish your project.

  1. In your published output folder, go to the folder "html5\lib\stylesheets"
  2. Open the file "main.min.css" in a text editor
  3. Search the text for: body.is-desktop{overflow:auto}
  4. Change the word "auto" to "hidden"
  5. Save the file
  6. Re-deploy/upload to your server/LMS

I viewed my fixed course locally and in my LMS, and the scrollbar was indeed gone.

Me: Win 7, Firefox 62.0.3

Scott Dinho

Oddly enough, while sorting out a file that could provide you that doesn't have any of our content that I wouldn't be allowed to provide and I didn't think made a difference, my more pared down version didn't show the scrollbar when loaded into our LMS (Saba) in FF and IE. I'll spend a little more time seeing if we made a mistake with our previous tester that showed scroll bars or if I can ID a new factor. I'll do more digging when I have time and report back. (Was looking forward to testing Scott L's fix.)

On the question of our FF version, we are bound by the ESR version that our IT group has provided us and the 52.5 version is as far as it has been updated. We can't update beyond it on company provided PCs.

Scott L

Nice notes, Scott D! You mentioning the Firefox version makes me wonder about Firefox and recent updates. On my current project, I only recently began seeing the scroll bar appear. This mostly tells me that - unless there were recent updates to the Storyline player as well - that maybe a change to Firefox's rendering engine (the thing that shows HTML and styles it with CSS) is at hand. In other words, I wonder if I got and installed a previous version of Firefox, if the problem wouldn't exist.

If I can get around to installing Firefox 60 or earlier (I'm currently on the latest 62.0.3, due to Firefox's auto-update feature) I'll report back!

Scott L

I'm pretty sure I was going down a wrong road here but I did manage to try out a handful of previous Firefox versions, wondering if the issue was going to show up as a non-issue in some older version. From versions 56–60, they all still showed the scrollbar. Anything  before v57 is a radical change, since 57 was Firefox's new 'Quantum' overhaul to their browser.

I'm guessing the Articulate development team will figure this out in time and that an update to the output files will probably address this.

Scott L

Crystal, although you were @ScottD this was really interesting to me. My ongoing SL file has been in development for a couple of months now, and I've added, and removed videos. I eventually pulled most videos out due to filesize and embedded them as external videos via Vimeo, but I do still have a few in my file for some specific interaction needs.

I just now created a new SL 360 file and published it. I see no scroll bars. Hmm!

Then, I inserted an MP4 file into the single slide file, and upon publishing no scroll bars persist, but I do see that for a very brief moment when the page loads. There is a split second of a scroll bar. And then it's gone.

Next, I added a 2nd slide, and added an add'l video file to that slide. After publishing this one, I now see the scroll bars appearing and stickin' around.

If I then go and remove the video from slide 2 and re-publish, the scroll bar is gone.

Interesting...

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