Screens look scaled up/blurry on Chrome

Hello,

I've created some Storyline templates and when published and viewed on different browsers, I don't get the same experience. On IE, it looks nice and clean; however on Chrome, it appears a bit blurry and things are scaled up.

Browser size: Display at user's current browser size

Player size is set to: Lock player at optimal size

I'm using Articulate 360. Any help/tips would be greatly appreciated.

Thanks!

19 Replies
Alyssa Gomez

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.

Prathiba Sriram

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?

Alyssa Gomez

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!

Glow 2D

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?

Prathiba Sriram

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!

Ashley Terwilliger

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.

Alyssa Gomez

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.
joanne k

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.

Crystal Horn

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:

Anshul Verma

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.

Lauren Rusch

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.)

kristian chartier

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.