Here's a challenge: In IE 11, Articulate player displays black pixels along borders of characters and text boxes

The content is developed in Storyline 3. I've attached a sample slide in a story file from one of our courses and a recording of the slide played in IE ver. 11. You will see that as the slide plays in the video, black pixels will appear along the edges of the character image as it changes poses. Additionally, some IE users experience the same black pixels displaying along the borders of text during animation.

This behavior only displays for some of our IE 11 users and the specific minor version of IE is not a factor. Two users can have IE11.950 and one will have the issue and the other not. The computers are all the same desktop PC models. This behavior does not occur when using Chrome or Firefox.

We've published with a variety of image qualities. Varied the Player - Browser settings whether to "Scale player to fill browser window" or to "Lock Player at optimal size" and varied the other Browser settings. No solution arose.

Requiring users to only view courses in Chrome and Firefox is simply not an option here.

We appreciate any informed input you can give us.

 

7 Replies
Katie Riggio

Hi there, James. Thank you for walking us through what's happening in addition to that recording. It was super helpful to see!

To start, I published the file to Web (here's the HTML5 output) using Storyline 3, Update 7. I tested it in IE 11.805.17763.0/Windows 10 where the character transitions smoothly on my end (here's a short recording).

A few questions to help us try to nail down the culprit:

  • What happens when the affected learners test my HTML5 output?
  • What version of Windows are they using to view the content?

We'll get to the bottom of this challenge together!

Van Tolar

Thank you Katie for your quick response! The affected users report no issues when playing your HTML5 output. So that's awesome.

We use Window 10.0 in this organization.

It turns out that I was mistaken on one point earlier. As it turned out, affected users have a Dell OptiPlex 7050 desktop. Users that don't experience the issue have a Dell OptiPlex 7040 desktop leaving us to speculate that it may be an issue with the way the 7050 video chip or driver interprets the Storyline content in IE11. However, it sounds like you may have a resolution in mind.

Getting excited over here!

Vincent Scoma

Hi James, 

Thank you for providing those details! 

Looking at the minimum requirements for viewing the published output, it sounds like the affected users are on the most recent version of IE 11, which is great! I ran through some tests as well and published the course to HTML5 only. After publishing the course and viewing it in IE 11(11.805.17763.0), the animations are running smoothly for me as well. Since the affected users don't see the issue in the HTML5 version, I would try to re-publish the course format in HTML5 only. 

After republishing the course, if you continue to see those black pixels appear, please let us know! 

Van Tolar

Hi Vincent,

It's definitely a pertinent question and I should have stated initially that we are publishing to HTML5.

We publish and play the Storyline output folder to a network share. Then, we double-click the story_html5.html file to launch the player in our IE11 browser. This is where our ERP module leads review the file and then make comments onto the corresponding Word file output from the course.

We have also uploaded the LMS content for the course into our LMS pilot and experienced the same "black pixel" issue in course playback from there.

Vincent Scoma

Hi James,

Thank you for sharing that information!

I wanted to share that when creating, sharing, and publishing Storyline projects, you will want to be sure to save the course to your local hard drive. This is to ensure that you will avoid any unexpected behavior from happening. 

Additionally, when working in a collaborative environment, I also wanted to share some best practices that will help prevent any loss of resources, file corruption, and other erratic behavior when sharing the course files. You can find out more information here

Please give those workflows a shot and let us know if you continue to hit any snags! 

Van Tolar

Hi Vincent,

Thank you for sharing the best practices. We will be sure to follow these. However, the issue wasn't resolved by publishing first to the local machine and moving the player files. In fact, whether the files are played locally or remotely on Dell OptiPlex 7050 machines, the behavior continues. If a the files are played locally or remotely on Dell OptiPlex 7040 machines, the behavior is absent.

We tested the player published from a Dell OptiPlex 7040 machine and once again, it was only the Dell OptiPlex 7050 machines that displayed the behavior on playback. All this leads, us to believe that the issue resides not with Articulate Storyline, but somewhere between the Video chip and/or its Windows driver in the Dell OptiPlex 7050 machine and the parsing/rendering of HTML5 in IE11.

If you have any more ideas on the issue, please let me know, but otherwise accept our thanks to you and Katie for your help.