Fuzzy text and images SL360 in Chrome

Nov 28, 2016

I am trying out SL360 and I run into a very ugly problem. When using Chrome (version 54.0.2840.99 m) the sharpness of text and images go from very blurry to sharp depending on the size of my browser window. IE11 neither SL2 has this problem. 

I do want the ability to scale the output (player options, Player size: Scale player to fill browser window). Does anyone know this problem and how to overcome this?

199 Replies
Ashley Terwilliger-Pollard

Hi Sou, 

There was an issue introduced in an earlier version of Chrome that contributed to this blurriness, and that has been fixed up by Chrome. Our team is still looking into additional settings to adjust that would resolve the rest of the issues. It's something that we've seen reported mostly in Storyline 3 and 360, based on our increased HTML5 support and how the rendering was modified in the newest versions.

In Storyline 2 are you also viewing the HTML5 output? You mentioned transitioning from blurry to sharp, do you mean while viewing the course it changes? Could it be a loading delay - any easy way to test is reloading/refreshing the existing page to see if it starts again as blurry/sharp. 

Pano K.

It appears that the latest Chrome version 62 has resolved the issue of blurry text and images. While the player text and elements still appear slightly blurry to me, it isn't a deal breaker since it is a vast improvement. I've attached a screenshot that includes a side to side comparison with Firefox.  However, I just wanted to confirm that it appears an acceptable fix has been implemented.

Alicia Roberts

My screen casts are still quite blurry. No change whatsoever.

Alicia Barrientos

Instructional Designer

CEANNATE CORP

T: 888-853-8148 ext. 4308

Ceannate Companies

www.ceannate.com

www.fmsdc.com

www.i-3group.com

www.iontuition.com

www.authenticaid.com

This e-mail and any attachments may contain information which is confidential, proprietary, privileged or otherwise protected by law. The information is solely intended for the named addressee (or a person responsible for delivering it to the addressee). If you are not the intended recipient of this message, you are not authorized to read, print, retain, copy or disseminate this message or any part of it. If you have received this e-mail in error, please notify the sender immediately by return e-mail and delete it from your computer.

Pano K.

I'm curious to see what others are seeing. Maciej, it would be helpful to see a screenshot of what you are seeing as well to confirm the problem on your end.

Alicia, screencasts are usually blurry due to compression settings which can be adjusted when you publish your course. However, if you provide a screenshot, which includes your player elements as well, it would help determine if it is indeed related to the Chrome issue.

Richard White

When you set up web based training, one of the things you need to do is pre-size your graphics. If you choose to resize your graphics in Storyline you're going to get blurry graphics. Even one pixel up or down it will blur. Try it with your problem graphics, size one to the correct dimensions before placing the graphic and size another up or down in Storyline and preview it in a browser and you'll see what I mean.

Ashley Terwilliger-Pollard

Hi all,

Thanks for continuing to share your experience here. Our team is continuing to look into some of the blurry display issues that are appearing in the Chrome browser specifically.

Pano, it's good to know that yours is appearing much better than before! It may also help folks if you could share additional information about your course set up such as: story size, player/browser scaling settings, publish quality chosen, etc. 

Alicia, just a note that replying via email will include your signature. You can edit out your contact information from your post if you'd like!  

Richard, your correct that any scaling of an image in Storyline (whether when you insert it or as a part of scaling the published output) will result in a change to the image quality. We have some best practices for working with images and media detailed here. 

Kris N

I've found this too - and It was prompted by zoom-region issues; FF is crisper (not perfect, though) - so I'm guessing SL is doing some mass compression on everything before output. 

So, just to throw another suggestion in the mix:

Something which kind of helps is by making a stupidly large template (1920x1080 -- full HD); and then, this gets scaled down. It's not ideal, of course: things are still blurry, and actually uncomfortable to read (because your eyes are fighting to try focus) but it 'feels' better than the distortion / pixelation that occurs with up-scaling. 

.tif files seem to maintain some better clarity, but you still get artefacts. 

Leah Hemeon

Hi there,

I'm just adding my voice to the crowd here. I too am experiencing this in Articulate SL 360 with the latest version of both Chrome and Firefox. I'm building a screenshot heavy course (pulling in the screens as PNGs. My source images are clear as day, they look good when authoring but HTML5 in Chrome is really blurry. Using highest quality on publish. It looks great when I publish to Flash only (had to enable flash on Chrome) but awful on HTML5. I'm publishing to 360 review for now to check quality. Any updates?

Amy Schuster

I am in the latest version of Chrome with html5 output on Chrome. It is very blurry. Users complaining they cannot view. We have many users using Chromebooks so Chrome is the only option. Also, we must use html5 due to flash not running on some of our computers. Please fix this problem ASAP. This seems like a major flaw. 

This discussion is closed. You can start a new discussion or contact Articulate Support.