SL3 - HTML5 Internet Explorer issue with screen flicker

Hey Karen,

What version of Storyline 3 was this content published with? We did have some issues with flickering, but show these resolved. The latest version history can be found here.

I am seeing the behavior you are reporting with your published link.

Would you be able to share the .story file, even this slide would be fine, so that we can take a closer look?

Hi. I only recently upgraded to SL3 about 2 weeks ago. I'm using 3.3.15007.0

Attached is .story file for reference.

And speaking of bugs, are you aware of this one?

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

https://community.articulate.com/discussions/articulate-storyline/sl3-scrolling-text-includes-lots-of-extra-space-ie-html5

Hi Karen!  I'm going to have a look at your file, but I wanted to address the extra space issue in the meantime.  Internet Explorer and Edge are both adding extra space in scrolling panels in HTML5 output.  We're hoping they can make some improvements on the way they handle that content format soon!

Hi again.  I published your course on my end, and I continue to see the flickering as well.  I'm investigating some of the different elements of your slide (slide master content, character, shapes) to see if I can identify a "culprit."

I'm going to document this issue for our team to investigate.  I'm not seeing the same behavior with Edge, Chrome or Safari.  Thanks for pointing this issue out, and hopefully using those other browsers for now will be a useful workaround.

Hi, I’d like to report a flickering effect when navigating between slides in IE11 (latest v11.0.9600.19002) Publishing with the latest version of Storyline 3.

I’m using my own buttons to navigate for two reasons. Long story short, when using the default nav buttons on an iPhone they cause the Safari navigation buttons to appear which inhibits optimum viewing experience – very annoying. The default nav buttons work without flicker but we wish to use the custom buttons I've used throughout all mods in production. 

Secondly, I also wish to 'gate' certain sections so after viewing slide layers the learner can move forward. This is possible by using my custom buttons.

This issue only seems to affect IE, Firefox and Chrome are good. Haven’t tested on Safari yet.

I’ve created a Flash-only version and this works so it appears it’s the HTML5 version. As Flash will be depreciated in 2020 we have to use HTML5.

Is anyone seeing this? It’s affecting all modules in production.

Attaching a test file - HTML/Flash published version and source file.

Shall I raise as a tech. support case?

Hi there Alex,

Thanks for sharing your file with me. I did some testing, and I'm definitely seeing a flicker in HTML5 when clicking the Previous or Next button on each slide. Take a Peek at my testing here.

Let me get this issue in front of our team to see how we can help.  I'll keep this discussion updated with any new information.  

Hi again, Alex! 👋

I did some further testing, and I found that the Previous and Next buttons sitting partially off the slide stage were causing the flickering. Once I moved those buttons fully onto the slide, the flickering in HTML5 disappeared.

Here's a link for you to test!

Thanks, Alyssa Gomez,

Yes, I used a half button design thinking it looked quite effective and saved a little screen real estate space - especially when the logo and instructional text are placed in the footer. As I've only seen this issue in I.E it seems it takes an exception to this.

I'm using an older Windows 7 laptop but will see if a colleague can test in Edge too.

I'll pass this information to my client.

Thanks!

Just got a friend to test a module using Edge and it works properly. 

Thanks, Alex! You're right, we're only seeing the flickering issue in Internet Explorer. Until we have a fix in place, you can adjust the placement of slide objects to be sure they are fully on the slide stage. This will prevent slide flickering in Internet Explorer. 

Thanks, we'll live with else, it'll mean re-publishing many modules.
We have the luxury to suggest other browsers for anyone affected.
Looking at http://gs.statcounter.com/

IE has a very small market share. However, I appreciate when designing for corps. or government most setup will use IE as it comes bundled with PCs and this is set by policy. Plus IT depts. are hesitant about installing other browsers.

This happens with Edge also, but correcting shapes outside the boundaries of the slides solved the issue. Thanks for discovering this! 

Thanks for letting us know the solution that worked for you as well Mario.

Do we have a fix now in place for this issue? We have encountered the same issue with IE for HTML5 published modules in SL3.

Hi LAB,

An update on this issue is noted here:

Storyline HTML5 courses may briefly blink, flicker, or shake when navigating between slides in Internet Explorer 11. This happens when there are objects outside the slide stage or objects on the slide that spill outside the slide area. Most browsers ignore these off-stage elements, but Internet Explorer attempts to display them, which causes the flicker effect.

Here are some ways you can avoid this behavior:

• Delete unused objects that are outside the slide stage, crop images that are partially outside the slide, or move objects so they're completely on the slide.

• Place hotspots over objects that are outside the slide stage to hide them from Internet Explorer. When an off-stage object is interactive, such as a button, you might need to add a trigger to the hotspot to duplicate the behavior of the interactive object. When an object isn't interactive, such as a picture, you don't need to add a trigger to the hotspot.

• Switch to another browser, such as Google Chrome or Firefox.

• View the Flash version of your course instead (if you included Flash output when you published the course).