I am using Storyline 360 and publishing HTML5 only. My client uses Chrome only. Every image and all text is unacceptably blurry.
Attached is an image of a screen from the course. On the left is HTML5 in Chrome, and on the right is Flash. Even the "Next" button is blurry.
I see in other discussions that this is a known issue. What is the timeline for fixing this? I will no longer be able to support this client unless we can get a fix soon, as they are quite dissatisfied with the current state.
Hi, Louis. I use Storyline 3, and I've encountered that same problem. It wasn't consistent, though. Some items would look in focus and some wouldn't. I also noticed that it was related to resizing the browser window, i.e., things looked fine at optimal size but might get fuzzy as Chrome tried to reinterpret/resize the screen.
Have you tried adjusting the Player settings to "Lock player at optimal size"? (That's in the "Other" section of the Player settings.) That worked for me. I realize it's a work-around, and some people might be upset if they can't enlarge the course. But small-and-clear is better than large-and-fuzzy. If this fix also works for SL360, perhaps it will be enough to placate your client.
Oh, and I agree: it would be nice to have a timeline for a fix. I trust Articulate is looking into this. I also understand that it's partly due to how Chrome interprets resizing in HTML5. Alas, it's an evolving standard...
Thanks for the note. Unfortunately, even when smaller, when compared side-by-side to the Flash output, the images and text are still blurry. We'll hopefully hear from Articulate soon about a fix for this important issue.
Update 17 of Storyline 360 (Update 5 of Storyline 3) included a fix for the blurry issues in Chrome, noted in the version history as:
Fixed: Courses are no longer blurry when you preview them in Storyline or view the HTML5 output in Google Chrome.
I know your goal is to produce high-quality work, and blurry slide images are getting in the way of that. We did hear from a few folks who were still running into issues after that update, so I wanted to share a summary of those findings here.
If you're seeing blurry images in your files, follow these steps:
Check the original size of the image, prior to inserting it in Storyline.
Insert the image in Storyline, and check the dimensions of the image under the Format tab:
If the image is the same size as the original, you shouldn't see a loss in quality.
If the image is larger or smaller than the original, you could see a loss in quality.
We've got a lot of helpful information on best practices for using high-quality images in Storyline in this article
Louis, you also mentioned a blurriness within the Next button and I can see that within your image, so I'd like to take a look at your file as well. Can you share a copy of it with us here?
FYI, I just updated Storyline to the latest version two days ago. The blurry images (including features such as the Next button) continue to be an issue.
To protect client confidentiality, I cannot share the Storyline file with you publicly in this forum. Do you have a way for me to send it to you privately?
Ashley, I have attached a different course which has no confidential content. It has the same issue of blurry text and images as the other, including the blurry "next" button, etc.
FYI, I updated Storyline just the other day (I am currently on v3.19.16600.0) and the issue is persisting.
Hi there, Louis. Thanks for sharing those links and the .story file.
I noticed in Chrome 69 in my Windows environment, I could see a bit of blurriness in the HTML5 output (left) compared to Flash:
In my Mac environment, the blurriness was much less noticeable:
Let me discuss this with my team to make sure we're on the same page about progress with HTML5 output in Chrome! Sorry for the frustration - I can guess that it must be difficult to have this conversation with your client as well.
Thank you for checking. Yes, this may be a deal breaker for this client. The issue is particularly troublesome when we are wanting to include screenshots that include small text.
Thank you for bringing up the blurry font issue with HTML5 output and checking for its solution.
FYI, it looks like publishing with SL 3 Update 5, it is a little bit more blurry in Chrome as compared to Firefox and IE.
1. Do you have any suggestion which font(s) works better with Articulate / HTML5? 2. What font size or range of font size works better with Articulate / HTML5?
Hi there James! Thanks for chiming in. We're still looking more closely at this bug with our team, and we'll keep you in the loop with any updates we receive.
While I don't have any specific font type or size recommendations, I'm curious to hear which font you're using. Also, could you share a screenshot to compare how the course appears blurry in Chrome versus how it appears in Storyline preview?
Hello Lecayle. We have two open issues in Storyline 3 for blurriness. When the player is set to fill the browser window, we've noticed the content isn't as crisp as when the player is locked at optimal size. Also, we've seen intermittent issues since Chrome version 69 with slide crispness.
If you can share an example file with us, or at least let us know the settings you're using to publish (player size, output type, browser version), we'll be able to keep you in the loop on any relevant issues that are updated.
The blurriness issue seems to have been fixed, at least for now. I just published some content to Articulate Review, and it is crystal clear. I'm curious if the Articulate team has implemented a fix, or if the settings in my Chrome browser have somehow changed.
Hi there, Louis. Thanks for the update. We are still working on consistently displaying high quality text and images across all browsers. Like you pointed out, though, it's possible that Chrome settings shifted slightly. We originally documented this issue with Chrome 69. We're still seeing some blurry output in Chrome 71, however.
Just to report, I'm having the blurry issue on Mac in Chrome 71 just for SOME slides of my Storyline360 courses. When output with fixed browser size, it seems to resolve properly. (It doesn't load in Edge at all so I'm only looking at it on the mac side).
Thanks for the additional info, although I'm concerned about your courses not loading in Edge! What happens when you try to open the course in Edge? Could you share a link with us here so that we can also test it out? If you'd prefer to share privately, you can always upload to me here.
Thanks for asking. When I launch the story.html or the html 5 file, I get the dark grey screen with white circles flashing to indicate "loading" but nothing loads in Edge. I recall with IE it always blocked Storyline and you had to click the "Allow content" button so I was assuming the same was going on here.
I tested a few courses, and with other courses I get a white screen with grey circles flashing!
One potential issue may be that since I'm only on Windows for using Storyline, it hasn't been properly activated and I haven't really pursued updates. Possibly that's blocking some functionality. I was for example trying to use the import quiz questions feature and windows wouldn't access the excel spreadsheet, so I had to add them manually
Thanks for those details, Amy! It sounds like you're launching the published output right out of the folder from your desktop. That might impact playback of your course. There are some ways you can test out your course in a live environment which will give a more accurate picture of performance. Check out this article.
Could you let me know if hosting your output allows it to play in Edge? If not, we're happy to work one-on-one with you if you'd like.
Thanks! They were also published to Review online, and didn't receive any issues from our review team (using both Windows/Mac), then published into our LMS. We just launched this week. I think our students have Chrome on Windows mostly. We haven't received complaints so I'm not too worried about Edge at this time.
we have blurry text in Chrome 72 as well. In SL360 playersettings the option "open in new window" is not checked, we are using the modern Player (html5 only). The blur effect can occur within one slide, see screenshot. The blurry text is in a text box, it's not a Picture.
Hi there! I have the same problem of blurriness with everything on the slides on preview and published. Also the SL360 interface ribbon is blurred. Files that used to look fine are blurry now after the last SL360 update. Interesting is that the same file looks OK in SL3. Any solutions?
96 Replies
Hi, Louis. I use Storyline 3, and I've encountered that same problem. It wasn't consistent, though. Some items would look in focus and some wouldn't. I also noticed that it was related to resizing the browser window, i.e., things looked fine at optimal size but might get fuzzy as Chrome tried to reinterpret/resize the screen.
Have you tried adjusting the Player settings to "Lock player at optimal size"? (That's in the "Other" section of the Player settings.) That worked for me. I realize it's a work-around, and some people might be upset if they can't enlarge the course. But small-and-clear is better than large-and-fuzzy. If this fix also works for SL360, perhaps it will be enough to placate your client.
Oh, and I agree: it would be nice to have a timeline for a fix. I trust Articulate is looking into this. I also understand that it's partly due to how Chrome interprets resizing in HTML5. Alas, it's an evolving standard...
Judy,
Thanks for the note. Unfortunately, even when smaller, when compared side-by-side to the Flash output, the images and text are still blurry. We'll hopefully hear from Articulate soon about a fix for this important issue.
Hi Louis and Judy,
Update 17 of Storyline 360 (Update 5 of Storyline 3) included a fix for the blurry issues in Chrome, noted in the version history as:
I know your goal is to produce high-quality work, and blurry slide images are getting in the way of that. We did hear from a few folks who were still running into issues after that update, so I wanted to share a summary of those findings here.
If you're seeing blurry images in your files, follow these steps:
We've got a lot of helpful information on best practices for using high-quality images in Storyline in this article
Louis, you also mentioned a blurriness within the Next button and I can see that within your image, so I'd like to take a look at your file as well. Can you share a copy of it with us here?
FYI, I just updated Storyline to the latest version two days ago. The blurry images (including features such as the Next button) continue to be an issue.
To protect client confidentiality, I cannot share the Storyline file with you publicly in this forum. Do you have a way for me to send it to you privately?
Absolutely, Louis. You can upload to our Support team here and they'll be happy to take a look.
Ashley, I have attached a different course which has no confidential content. It has the same issue of blurry text and images as the other, including the blurry "next" button, etc.
FYI, I updated Storyline just the other day (I am currently on v3.19.16600.0) and the issue is persisting.
Here is a link to the content published as HTML5 only (blurry): https://360.articulate.com/review/content/37289e55-7828-4284-86aa-6d0c128a6fc2/review
Here is a link to a Flash version for comparison. Note that everything is much crisper in the Flash version: https://360.articulate.com/review/content/eed621db-2732-446c-8fae-af732426421a/review
I will look forward to your reply. Thanks.
Hi there, Louis. Thanks for sharing those links and the .story file.
I noticed in Chrome 69 in my Windows environment, I could see a bit of blurriness in the HTML5 output (left) compared to Flash:
In my Mac environment, the blurriness was much less noticeable:
Let me discuss this with my team to make sure we're on the same page about progress with HTML5 output in Chrome! Sorry for the frustration - I can guess that it must be difficult to have this conversation with your client as well.
Thank you for checking. Yes, this may be a deal breaker for this client. The issue is particularly troublesome when we are wanting to include screenshots that include small text.
Thank you for bringing up the blurry font issue with HTML5 output and checking for its solution.
FYI, it looks like publishing with SL 3 Update 5, it is a little bit more blurry in Chrome as compared to Firefox and IE.
1. Do you have any suggestion which font(s) works better with Articulate / HTML5?
2. What font size or range of font size works better with Articulate / HTML5?
Hi there James! Thanks for chiming in. We're still looking more closely at this bug with our team, and we'll keep you in the loop with any updates we receive.
While I don't have any specific font type or size recommendations, I'm curious to hear which font you're using. Also, could you share a screenshot to compare how the course appears blurry in Chrome versus how it appears in Storyline preview?
Hey folks, is this resolved? I'm noticing that my outputs are blurry no matter how much manipulation I do to the production settings.
Hello Lecayle. We have two open issues in Storyline 3 for blurriness. When the player is set to fill the browser window, we've noticed the content isn't as crisp as when the player is locked at optimal size. Also, we've seen intermittent issues since Chrome version 69 with slide crispness.
If you can share an example file with us, or at least let us know the settings you're using to publish (player size, output type, browser version), we'll be able to keep you in the loop on any relevant issues that are updated.
The blurriness issue seems to have been fixed, at least for now. I just published some content to Articulate Review, and it is crystal clear. I'm curious if the Articulate team has implemented a fix, or if the settings in my Chrome browser have somehow changed.
Hi there, Louis. Thanks for the update. We are still working on consistently displaying high quality text and images across all browsers. Like you pointed out, though, it's possible that Chrome settings shifted slightly. We originally documented this issue with Chrome 69. We're still seeing some blurry output in Chrome 71, however.
Well if it's helpful, I'm using Chrome 71, and everything seems crystal clear. I'm hoping it lasts!
Just to report, I'm having the blurry issue on Mac in Chrome 71 just for SOME slides of my Storyline360 courses. When output with fixed browser size, it seems to resolve properly. (It doesn't load in Edge at all so I'm only looking at it on the mac side).
Hi Amy,
Thanks for the additional info, although I'm concerned about your courses not loading in Edge! What happens when you try to open the course in Edge? Could you share a link with us here so that we can also test it out? If you'd prefer to share privately, you can always upload to me here.
Hi Ashley,
Thanks for asking. When I launch the story.html or the html 5 file, I get the dark grey screen with white circles flashing to indicate "loading" but nothing loads in Edge. I recall with IE it always blocked Storyline and you had to click the "Allow content" button so I was assuming the same was going on here.
I tested a few courses, and with other courses I get a white screen with grey circles flashing!
One potential issue may be that since I'm only on Windows for using Storyline, it hasn't been properly activated and I haven't really pursued updates. Possibly that's blocking some functionality. I was for example trying to use the import quiz questions feature and windows wouldn't access the excel spreadsheet, so I had to add them manually
Thanks for those details, Amy! It sounds like you're launching the published output right out of the folder from your desktop. That might impact playback of your course. There are some ways you can test out your course in a live environment which will give a more accurate picture of performance. Check out this article.
Could you let me know if hosting your output allows it to play in Edge? If not, we're happy to work one-on-one with you if you'd like.
Thanks! They were also published to Review online, and didn't receive any issues from our review team (using both Windows/Mac), then published into our LMS. We just launched this week. I think our students have Chrome on Windows mostly. We haven't received complaints so I'm not too worried about Edge at this time.
Thanks for the update, Amy. Please let us know if you run into any additional issues now that your course has launched.
Hi articulate staff
we have blurry text in Chrome 72 as well. In SL360 playersettings the option "open in new window" is not checked, we are using the modern Player (html5 only). The blur effect can occur within one slide, see screenshot. The blurry text is in a text box, it's not a Picture.
Do you have any news about fixing this?
Best regards
Victor
ps: Font used here is Frutiger 45 light
Hi Victor,
Thanks for reaching out and letting us know what you are running into as well.
We have seen similar reports extending to the latest version of Chrome as well and I appreciate you sharing the image.
I'll get this added to the report as our team continues investigating.
This conversation is attached so that we can share updates as we can with you right here.
Thank you, Leslie.
Hi there! I have the same problem of blurriness with everything on the slides on preview and published. Also the SL360 interface ribbon is blurred. Files that used to look fine are blurry now after the last SL360 update. Interesting is that the same file looks OK in SL3. Any solutions?