Forum Discussion

Alistair's avatar
Alistair
Community Member
2 months ago

Small gap between slide content and player

(This post keeps getting deleted - if there's an issue, please let me know)

This is something I've noticed in Storyline for a few years now. 

9 times out of 10, there is usually a small 1px gap between the edge of my slide content and the player, making it impossible to create seamless content. The small gap also shows some content, but not others. The location of the small gap also seems to be random across the 4 sides. 

For example, below is a screenshot from one of my latest courses (in both Chrome and Edge). You can see the small gap between all edges of the slide and the player, with the edges more prominent in Chrome. The gap does appear slightly in the Storyline Preview, but is much worse in published content (either to SCORM or Review 360). The slides are 1080x1920. 

For reference, the below screenshots were all taken on a 4k monitor at 100% page zoom. 

It appears to be a responsive scaling issue, as the gaps change affect edges depending on the window size, the browsers zoom, etc. 

To try and mitigate this issue, I extended the edges of the blue rectangle shapes outside of the slide bounds, but those objects get culled so you can see the gap, but some objects that are beneath those objects are still visible. 

Has anyone else come across this issue (my entire team have), and if so, have you tried anything that has fixed the issue? Making edits to the SCORM package JS or CSS sheets isn't a viable workaround, as it needs to be corrected in the Review 360 versions (for client reviews). 

Additionally, can anyone at Articulate touch on whether this is a known bug and/or if its on a patch roadmap?

Please note: I can't upload the Storyline file due to privacy, however, I can confirm this has happened in almost all of the Storyline modules we produce across multiple versions, browsers, and operating systems. 

Above: Storyline Preview. Very small gap between the left and right edge of the blue banner at the bottom. 

Above: Review 360 - Chrome. Very visible gaps along all edges of the slide, where you can also see objects that go outside the edges of the slide. 

Above: Review 360 - Edge. Barely visible gaps along the blue edges of the slide.

Above - Left: Zoomed in screenshot of the bottom of a slide with custom navigation arrows, where you can see the button between the bottom of the blue rectangle and the player. 

Above - Right: Zoomed in screenshot of the Master slide showing the blue rectangle is extended past the slide bounds completely covering the bottom of the button so its not visible. The blue bar has been moved on the right edge to show where the edge of the slide is, purely for the purpose of the screenshot. 

Note: Interestingly, when I tried to screenshot the button being visible in the gap, if the browser window lost focus, the button would disappear from the gap. 

No RepliesBe the first to reply