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).
This is only happening in Firefox. I don't have this issue when I view the course on Chrome.
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.
we observe a similar issue on Internet Explorer and Edge: when publishing the Storyline file onto our LMS, a scrollbar appears to the right of the screen whereas it isn't required.
Do you have more information on this issue since the last post?
Thanks for checking in. This issue is still open and our team is investigating it further. We have it noted as specific to Firefox, but since you're seeing it in IE too, can you let me know what version? Are you able to use another browser such as Chrome? Also, what LMS are you using?
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.
I'm sorry you've hit the same roadblock, but I'll let our team know your Firefox version and that you're also seeing this in IE11. Do you know if it also shows you that in SCORM Cloud and IE11, or is it only Saba? That's some info that would also help us narrow down the issue.
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 ;-)
Two more screen grabs if they are of any more help. These show that a CSS class, .is-desktop, seems to be partly involved in setting a CSS rule that allows for these scrollbars. But I'm sure there is W?AY more to this than that... as this exists for Chrome, too, where the problem doesn't occur.
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!
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.
In your published output folder, go to the folder "html5\lib\stylesheets"
Open the file "main.min.css" in a text editor
Search the text for: body.is-desktop{overflow:auto}
Change the word "auto" to "hidden"
Save the file
Re-deploy/upload to your server/LMS
I viewed my fixed course locally and in my LMS, and the scrollbar was indeed gone.
Wow, Scott! "Super-smart techie folks at Articulate" How about Scott L. from the community in that mix. 🌟
Thank you for sharing this mighty impressive temporary workaround while our team continues to investigate this issue. I'll share it in our report, and we'll circle back with any new information!
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.
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!
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.
Hi Scott D. You mentioned that you weren't able to reproduce the issue in a pared down version of your file. Did the initial file have video content in it? And was that video removed in the pared down version? We had a related issue with scrollbars and gray space if the course had video in it.
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.
Thank you for those testing details Scott L :) You described perfectly another issue we have reported to the team with the Modern Player and a video being on the next slide.
I'm adding this conversation to that report as well so that we can update you when we can.
29 Replies
This post was removed by the author
I did, and nothing happens. It does resize the iFrame, but the gray space and the scrollbar remain. Any other suggestions?
Hi Claudia and welcome to E-Learning Heroes :)
Thanks for reaching out and sharing the details of what you are experiencing.
Is this issue limited to your LMS while viewing in Firefox or are you able to replicate the issue in SCORM Cloud as well?
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!
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.
Hi Leslie,
Thank you so much for following up. At least I know I'm not the only one. Do you have any idea when this might be fixed?
Thank you!
I do not have a timeline to provide on this Claudia.
As I mentioned above, we do tag the applicable conversations so that we can update you here when we can.
Hi Leslie,
we observe a similar issue on Internet Explorer and Edge: when publishing the Storyline file onto our LMS, a scrollbar appears to the right of the screen whereas it isn't required.
Do you have more information on this issue since the last post?
Tx for advising.
Hi Laurence,
Thanks for checking in. This issue is still open and our team is investigating it further. We have it noted as specific to Firefox, but since you're seeing it in IE too, can you let me know what version? Are you able to use another browser such as Chrome? Also, what LMS are you using?
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.
Hi Scott,
I'm sorry you've hit the same roadblock, but I'll let our team know your Firefox version and that you're also seeing this in IE11. Do you know if it also shows you that in SCORM Cloud and IE11, or is it only Saba? That's some info that would also help us narrow down the issue.
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
Two more screen grabs if they are of any more help. These show that a CSS class, .is-desktop, seems to be partly involved in setting a CSS rule that allows for these scrollbars. But I'm sure there is W?AY more to this than that... as this exists for Chrome, too, where the problem doesn't occur.
Ashley,
It shows fine in IE 11 and Firefox from SCORM Cloud and also when viewed locally from my hard drive.
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!
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.
body.is-desktop{overflow:auto}
I viewed my fixed course locally and in my LMS, and the scrollbar was indeed gone.
Me: Win 7, Firefox 62.0.3
Wow, Scott! "Super-smart techie folks at Articulate" How about Scott L. from the community in that mix. 🌟
Thank you for sharing this mighty impressive temporary workaround while our team continues to investigate this issue. I'll share it in our report, and we'll circle back with any new information!
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.
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!
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.
Hi Scott D. You mentioned that you weren't able to reproduce the issue in a pared down version of your file. Did the initial file have video content in it? And was that video removed in the pared down version? We had a related issue with scrollbars and gray space if the course had video in it.
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...
Thank you for those testing details Scott L :) You described perfectly another issue we have reported to the team with the Modern Player and a video being on the next slide.
I'm adding this conversation to that report as well so that we can update you when we can.
We did not have video in either version of the course.
(Took time off last week and haven't had a chance to do any further testing.)
Thanks for popping in with an update Scott D. Everyone needs time off.
Your issue does seem to be an outlier so far, but interesting that you are not able to reproduce in SCORM Cloud.
Let us know what your further testing may find so that we can assist if possible :)
This discussion is closed. You can start a new discussion or contact Articulate Support.