Screens look scaled up/blurry on Chrome

Hi Prathiba,

Our team has also noted that the Chrome playback of courses can appear blurrier than other browsers such as IE, Edge, or Firefox. We're looking into the display issues associated with that, so I'll keep you posted on any new information I receive.

If you have any screenshots to share, that would be really helpful! I can include them in the report we've filed.

Hi Alyssa, yes, please keep me posted if you have further information on this. Attached is some sample screenshots. Also the position of icons (and other elements, such as text boxes) changes across browsers. Is this an expected behavior?

Hi Prathiba!

Thanks so much for those screenshots--that's really helpful! When you took those screenshots of the published view in Chrome and IE, were you viewing the published output locally? 

If so, try hosting the published output on Tempshare first, then view the content in Chrome. Let me know if that makes a difference!

Hi, I'm experiencing a similar problem with blurriness in Chrome.

Comparing Storyline 2 Flash + HTML5 output to Storyline 3 HTML5 only. Same program, same settings. Same window size in Chrome. These are both uploaded and viewed through an AWS viewer similar to Tempshare.

Screenshot comparisons are attached. In the three-way comparison, note that the output is improved when viewed in Internet Explorer.

Any workarounds available?

Hi Alyssa, thanks for that. Yes, those screenshots were from local published output. I have now published on Tempshare and can say that the icons placement issue has been fixed. However, the blurriness in Chrome still remains the same. I've uploaded my files here for you to check:

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1c4ifbfrqq4217klq3q1da7hgs9/story.html

Thanks!

Hi Alyssa,

On similar lines, I was wondering if we have some testing protocols/best practices documented somewhere that I can use for our internal testing? Thanks, Prathiba.

Hi Prathiba and Glow,

The blurriness in Chrome is something our team is continuing to take a look at. We've seen it improve with each Storyline 360 and Chrome update, so please make sure you're using the latest of each! Storyline 360 Update 12 was released earlier this week, and my Chrome browser shows ver 63 as the latest. 

We'll keep you posted here as our team continues to look at fixes! 

In terms of testing protocols/best practices I'd also recommend testing the content in the final, intended publish environment vs. locally. You may encounter security or browser restrictions if viewing it locally. I also like to share these steps here to help prevent corruption or odd behavior while working in your files.

Hi Glow 2D -- sorry to hear you're running into blurriness in Chrome, too. This is actually a bug that our team is continuing to investigate. I will add this thread to the report so that we can post update here as soon as we get more information on a fix. 

Hi Prathiba -- I'm glad to hear that hosting your file on Tempshare solved the issue with the icons getting cut off. Regarding the bluriness in Chrome, I'll let you know as soon as I get an update on that bug. 

Since you asked about best practices for testing content, the only thing to keep in mind is to test the output in it's intended environment. 

• If you publish for Web, test the output in Tempshare or another web server.
• If you publish for LMS, test the output in SCORM Cloud or another LMS
• Always be sure you're testing in supported web browsers, listed here.

I have the same problem with the blurriness for my images. We are using Storyline 2 and I doubt we would upgrade. I work for a state agency. Am I stuck with blurry images? The only fix we have found so far is to "uncheck" HTML5 before publishing. This is not a good practice in my industry, we publish for clients who use all different platforms, including Apple products.

Hi there, Joanne.  In your Storyline 2 output, some of your content may not appear as crisp in HTML5 output as it would in Flash.  Here are a couple of best practices:

• To avoid scaling and reduction in image quality, we recommend locking your course player at optimal size.
• Also, try to include higher resolution images rather than resizing them to be larger within Storyline.  
• Check out this article for more best practices!

Hello,

We're going through with the same issue of fonts not appearing as crisp on Chrome when compared to other browsers, which is weird since Chrome is ideally expected to be the most stable of all browsers.

Since our clients favor Chrome over others, it'd be really helpful if you could suggest a work around or a fix soon.

Thanks.

Hi Anshul,

What version of Storyline are you using? Our team is looking into issues with blurriness in Chrome while viewing the HTML5 output of Storyline 3/360. 

We'll keep folks posted here as we continue work on that! 

Hello,

We use Storyline 360.
Yes please, keep us updated.

Thank you,
Anshul Verma
Quality Assurance Engineer
e-Learning
Cactus Communications
Sent from Mail for Windows 10

Thanks, Anshul - we definitely will. 

Note:  Replying via email will include your signature. You can edit out your contact information from your post if you'd like!  

Hi everyone,

I've been dealing with the fuzzy screenshots in Chrome issue and discovered that it seems to be tied to your computer's text size. If your text size is set to Smaller, the screens look great in Chrome, if your text size is set to Medium or Larger, Chrome scales up your course accordingly. (Try zooming out to 80% in Chrome and see if your screens improve - mine did.)

Hey Lauren and welcome to E-Learning Heroes :)

Are you referring to the Scale and layout section under your display settings? I know this includes text size.

We typically recommend 100%:

Thank you for popping in to share your findings and advice with the community :)

It's not ideal, but you can resolve the blurriness issue by replacing your images with videos that are just 1 frame long. You'll need to ensure that the videos are recorded in the correct aspect ratio and that you turn off video compression. A single frame MP4 recorded at 1080x720 should be well under 200KB, which is roughly the same size as a typical PNG file.

Hi Leslie,

Yes, exactly. We're still running Windows 7 here, which designates Smaller, Medium, Large in the Display section of the Control Panel:

Changing from Medium (125%) to Smaller (100%) fixed my blurry screens in Chrome.

Thanks again for sharing Lauren. I was trying to remember which Windows version said 'Smaller' instead of just the percentages :)