Problem with HTML5

Jan 26, 2016


We created a questionnaire using Storyline. It contains about 40 slides, using images, drag and drop and other types of assessments.

When we publish the animation in HTML/Flash, there is no problem. But when published in HTML5, which we absolutely need, the questionnaire's design is not the same. The images quality is simply not there. The drag and drop for example, are all blury. So this applys for our custom images as well as items designed directly in storyline.

We are building this questionnaire for a paying client and it needs to be perfect.

We have integrated JavaSript in our slides, so it is essential that the questionnaire works in HTML5 and the design is the same quality as it would be in HTML.

Here are some screen caps attached.

Is there a solution?
Thank you,


4 Replies
Christie Pollick

Hi, Stephanie -- Thanks so much for reaching out here. Have you had a chance to review the following information, by chance? Objects Are Blurry or Pixelated in HTML5 Content:

Objects aren't vectored in HTML5 output. As a result, they may not appear as crisp in HTML5 as they do in Flash if you set the player to scale to fill the browser. To avoid scaling and reduction in image quality, we recommend locking your course player at optimal size.

Stéphanie Savoie

Hello Christie,

Thank you very much for your answer! HTML5 version is no longer blurred but I still have problems with the upper left corner of my images . I have enclosed a screenshot and I have cercled in yellow the corner itself so you can have a better idea of what is the problem. It seeems that I have lost a pixel with the html5 but it is working fine in html itself. Is there something we can do about this?

Note that the white and blue frameworks (corner of my images) are designed directly in storyline.

Thanks again,

Christie Pollick

Hi, Stephanie -- I appreciate your response! As for the missing pixels you are experiencing in HTML5, I was able to locate an existing ticket in with our QA team for additional investigation. The workaround listed is as follows:

If needing to add a border to an image and use HTML5, insert a shape behind the image and group them together.

And while I am not able to offer a timeframe in which resolution of this matter may be achieved, I did want to let you know that I am adding this thread to the ticket, so any updates received will be shared here at that time. Your patience is appreciated! 

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