Fuzzy text and images SL360 in Chrome

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
Ben Hancock

I've got the 360 subscription renewal due on the 20th. $999 seems like a lot of money for something that is causing me a lot of problems. One big contract lost already due to this issue with a customer where 80% of their user's use chrome! Seriously considering my options! This is not meant as a threat, but just a reminder that we rely on your product to make a living and so far it is falling short and is costing us business. If it were a $49 piece of software I could understand but this costs a lot of money!

Neal Peterson

Hello—I'd also like to pipe in here, as the L&D team I'm on is also struggling with this issue. We're at the tail end of a very ambitious set of projects with aggressive deadlines, and this blurriness-in-Chrome problem is starting to become a point of contention with our key stakeholders.

I'll be watching this thread with great interest.

Ashley Terwilliger-Pollard

Hi Rachel and Neal, 

I am sorry that this has continued to cause you trouble and headaches. Our team is continuing to work on this issue, and it's been steady progress with each Storyline 360 update and the updates rolling out to Chrome as well. We know it's still not where you need it - so the team will keep this at the forefront of work. 

We'll keep you posted here, and double check that you're always on the latest update of Articulate 360 (Update 11 today). 

Kris N

Alright, I've done a bit of testing; @Ashley -- any chance you can point the developers to here

One particular post on SuperUser [link] talks about this in depth as a Chrome rendering issue; 

I've found that throwing in these suggested additions to the CSS fixes it (see attached image - the changes may look subtle, but they're there! Much more noticeable when 'switching' between the two); I've also attached a Firefox view for comparison.

The bottom images were from a package created at the start of last year (2017) with the top ones coming from a package created about two weeks ago. So this eliminates SL360 [at least] from being the specific culprit (in my books).

@Ashley -- Perhaps you can get the devs to add this to the generated CSS? 

tl;dr -- this looks like a chrome-specific bug, and we probably shouldn't berate the Articulate devs too much about it. Firefox is definitely clearer (annoyingly -- from the perspective most people tend to use Chrome. I don't know about Safari either)

 

Richard White

There's several items that have not been discussed that Articulate cannot control:

* Your fonts you are using, are they licensed to use on your computer? If not storyline will guess at redrawing them if there's no export option (will be hidden).
* Your fonts you are using, are they true type or open type? If not you'll get fuzzy type as Storyline is trying to interpret the font.
* Are you using a family of fonts? If you try bold on a font family that is normal or plain, you are going to get fuzzy type. Use the proper typeface.

I restrict my type in my courses to Arial, Open Type or Helvetica-I don't have a fuzzy type problem. Good luck out there!

Kris N

Whilst the font stuff is true, it's interesting that FF works a lot clearer on this front also! 

(Incidentally, I've had a couple issues with font rendering + embedding about 6 months ago with SL360. No problems since a variety of fixes though, and I suspect this was also linked to an MS update)

Many of the issues in this thread are around the images being blurry; my suggested fix was merely to address those issues.

In the event anyone actually wants to apply my hacky work-around [which, for the record, I have not done any extensive testing with this, except for ' hey, this works! :P '] --

Export as HTML5. Navigate to html5 \ lib\ stylesheets and open in a text editor 'main.min.css'. 

Add the following to the very top:

html { 
image-rendering: optimizeSpeed; /* */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
}

Save the changes, then re-deploy, or load in browser as necessary.

I hope to do some testing in the next few days to see if this does actually work or not; I've received a couple emails on how to implement this, so I figured I'd share. 

Kris N

So just to add something more to the mix:

When exporting as HTML5, if I load the generated story_html5.html directly into the browser [CHROME], the image blurs (as we know) but the text remains crisp. 

If I then upload this into Moodle as a SCORM package, and open this up in CHROME, the text becomes blurry; like really blurry. 

If I open this up in FIREFOX -- TA DA -- no blurry's! [See Attached files] 

However, in SCORM Cloud, the text remains clear in CHROME... 

 

Miroslav Hes

Hi to all unhappy developers and thank you Kris. I have tested your solution, but there is no improvement. It doesnt matter, if I change CSS, if I run the course remotely (from website or LMS) or localy (just using story_html5.html). Always the same bad result, blurry text and images. See attachments, using Storyline 3.

To Articulate Staff: You have nice product, but if it doesnt provide regular outputs, we can not use it! We have hundreds of thousands emploeeys of our customers using Chrome, we are providing them fourteen mandatory courses (and many others) in our own LMS, but this situation starting to kill our business. It seems, we have to rebuild all our courses using another technology. Hundreds and hundreds hours of work :-(

We need fair information, if you are able in very short time to solve that problem, or not. If not, we have to start to develop our courses in another technologies. This situation starts to be more than complicated and very, very expensive.

Thanks!

Amy Schuster

Here is a strange addition to this discussion. I have simulations created using Storyline. These are VERY blurry. Almost unreadable, while on the other hand, I have added images (screenshots) of the screens I need to show.  Even when they are resized (bigger or smaller) they are still more clear than the simulations created using the record screen option in Storyline to create simulations. This is not a resizing issue. I could not resize my simulations if I wanted to as it is not allowed. This really needs fix. We have Chromebooks and users who must use html5. This is just not working.

Justin Grenier

Hi, all!

The blurriness discussed in this thread is caused by Chromium Bug Number 596382.  Although Google considers the bug fixed, we beg to differ!  🙂

Since it seems a fix may not come from Google, for some time we've been digging into how we might make changes to improve the learner experience from our end.  Such a fix would involve a complete overhaul of our published HTML5 output, and would require Storyline to scale and position every vector image on the slide instead of scaling the object that contains those images.  It's a high-risk change because it impacts every object on the slide, but we know it's important to the learner experience and so we're targeting Q2 2018 for a possible fix.

Although we can't commit to a fix before we dig deep and experiment with the proposed changes, we're grateful to our customers in this thread for continuing to stress the impact and importance of this issue.  We'll keep you updated on our progress!

Kris N
Justin Grenier

Hi, all!

The blurriness discussed in this thread is caused by Chromium Bug Number 596382.  Although Google considers the bug fixed, we beg to differ!  🙂

 

Sorry, Justin, but this bug report refers to a 'flickering' that occurs with the animation (you can see it in the video they posted on youtube -- https://bugs.chromium.org/p/chromium/issues/detail?id=596382 )

1) Make sure you have a computer with either a Nvidia or Intel graphics card
2) Open Chrome 49 and open URL: http://codepen.io/GreenSock/pen/rexpMG?editors=1000
3) You will see the flicker in the bottom animation when it scales up. You will see that it flickers and stutters before the animation completes the scale.

I didn't delve deep enough into the bug report (or quoted bug reports) but this specific one doesn't look to be related. (Happy to admit I'm wrong in the event it is mentioned /cross-referenced somewhere :P ) 

Amy Schuster

So I have another Chrome issue and can't find if anyone else is having this. I have several simulations. I have auto tuned those files. When I use 360 html5 (fall back on flash) in Firefox it works fine, but in Chrome it is random. Some files it works fine and others when they click the hotspot correctly nothing happens. If they click outside the hotspot it says it is wrong. If I take off the auto tuning it works fine again--but I don't want to do that is it is not a clear and clean. Seriously starting to think simulations are out in html5 Chrome. 

Ashley Terwilliger-Pollard

Hi Amy and Alicia, 

Thanks for reaching out here! This sounds a bit different than the main issue discussed here, where content is blurrier in Chrome than it would be in another browser such as Firefox, Safari, even Internet Explorer. 

Amy - For the issue with your hotspot, is your web browser zoomed in? I've seen that set up not register a click on a hotspot correctly. So test it out at 100% if you can - and let me know! We have shared this behavior with our team, so I'll also keep you updated on that (Probably directly via email so that I don't confuse folks here!)

Alicia - Any scaling or resizing of a screen recording can cause some blurriness and display issues. We have a great article here with some best practices and tips, specifically for screen recordings. 

Let me know if you have any other questions - we're here to help. 😀

Amy Schuster

I do not believe it has anything to do with browser size. If the auto tunings are set it doesn't work when I click on hotspots in Chrome (on only some random storylines), if I take them off, it works. I did not change my browser at all. Also, this has never been an issue before. Lastly, how would I control how my user sets their browser if that were the problem? I spent hours auto tuning everything to look more professional and now the answer to make it work is take all that off? 

These issues with Chrome and viewing need to be fixed. As far as the the blurriness, my simulation which I cannot resize (by your settings), are much blurrier than images that have been resized. So it is not if I size them nor not.

In the article you say to figure out what our users are using. Well I have Chromebooks, laptops, 19 inch screens, Macs, etc all being used. How do I possibly do that? Plus, I created 100 of these simulations when this wasn't a problem. Do I now have to recreate them all so it works like it used to? I am sorry, but that is really is not a solution. I have not locked my browser at optimal, but I will try that.

This product costs enough it needs to work not just if it all set to this one perfect setting, but for all users. I know that saying it is a sizing issue is an easy answer, but that is not what we as users are experiencing, and setting lock screen is not fixing the issue. Please listen carefully to our feedback and look at these items.

Kris N
Miroslav Hes

Hi to all unhappy developers and thank you Kris. I have tested your solution, but there is no improvement. It doesnt matter, if I change CSS, if I run the course remotely (from website or LMS) or localy (just using story_html5.html). Always the same bad result, blurry text and images. See attachments, using Storyline 3.

To Articulate Staff: You have nice product, but if it doesnt provide regular outputs, we can not use it! We have hundreds of thousands emploeeys of our customers using Chrome, we are providing them fourteen mandatory courses (and many others) in our own LMS, but this situation starting to kill our business. It seems, we have to rebuild all our courses using another technology. Hundreds and hundreds hours of work :-(

We need fair information, if you are able in very short time to solve that problem, or not. If not, we have to start to develop our courses in another technologies. This situation starts to be more than complicated and very, very expensive.

Thanks!

I've just done some additional testing; In my own tests, it seems to assist with some image but not consistently... This is so weird! :/ 

Kris N

Could I please ask the community [around this issue]:

Is everyone re-working old files? Or are they creating them from scratch? 

The reason I ask is I'm working through a case I lodged around this problem; what I've been able to determine is:

- if I import slides from an older file OR Compile an older project, the result is blurred texts / images in Chrome [FireFox remains OK, and it is also OK in SCORM Cloud regardless of browser ]

However, when starting from scratch [and not copying any elements - text boxes, pictures, etc - either between projects or within projects] this issue does not seem to appear in Chrome. 

My LMS is Moodle (I can't give specifics on versions or anything else). Just wanting to know if I'm going crazy, or is there something in this?

Thanks!

 

Ashley Terwilliger-Pollard

Hi Amy, 

Our team is looking into a fix for the issues described earlier in this discussion with the fuzzy/blurry text and images in Chrome. It's not a minor fix, as it'll impact everything on a slide so we're being really careful to not impact any other elements of Storyline. 

With that being said, it's really hard to diagnose the issue an about something appearing blurry/fuzzy without seeing it - so I'd like to open a case on your behalf and get that into the hands of our senior support engineers. Keep an eye out for an email from Support@articulate.com with a link to upload a sample copy of your course. That way we can work one on one with you to figure out what's happening and next steps. 

They'll also be able to take a look at the hotspots, as that does appear to be a separate issue. 

If anyone else comes across this discussion and feels it's the same issue as what you're experiencing on a project, we'd love to take a look. You can reach out to our Support Engineers here, and they're around 24/7. 

Kris, 

I found your support case too - so I've made sure our team is aware that you're also connected to this forum discussion. The more info the better - and I'll keep an eye on your support case too so that I can update this discussion.

D C

Hi all,

I have experienced a similar issue on Chrome where the screen appears slightly blurry while awaiting the user to perform an action during a Try Mode simulation on Storyline 360. The blurriness disappears once the user clicks the required object for long enough for the media to complete and move on to the next slide. As soon as it goes to the next slide the blurriness appears again until the user clicks. This blurriness gives an unprofessional look to the course and has been remarked upon by quite a few users.

I had a quick look on Firefox and it doesn't seem to happen there. However, it simply isn't practical to ask everyone at the company to switch to using Firefox. I hope that this issue is fixed as soon as possible because there is far cheaper software out there that creates screencasts without encountering such issues and it seems like a little bit of a stretch to expect customers to continue to pay €1000 a year for an application that, despite being a super product in many ways, can't manage to do some of the basics correctly. 

Having switched to 360 nine months ago, I have to say that so far, I have been very disappointed with Storyline 360's ability to publish to HTML5. Perhaps a complete overhaul is exactly what is required here in order to fix what is otherwise an amazing product with great support and a brilliant community.  Fingers crossed that these issues are resolved sooner than later. 

Ashley Terwilliger-Pollard

Hi Derek,

I'd like to have our team take a look at your example. I understand if you'd rather not share your file, but since it's the best way for us to demonstrate the problem and use real examples as we work towards this fix, we'd happily accept a .story project shared here privately if you change your mind.

If you do decide to share, let me know and I'll follow along in your case too.