Web Objects blurry, especially text

Jan 24, 2019

Paul Colby
By Paul Colby

Hello. I have created a Web Object in Animate CC and inserted into Storyline. Outside of Storyline, the Web Object looks great, even zoomed in (see attachment AnimateCCWebObject_OutsideStoryline-SHARP.jpg). When I import that same Web Object into Storyline, the quality decreases noticeably (see attachment AnimateCCWebObject_InsideStoryline_-BLURRY.jpg).

Yes, I am scaling my Player size to "fill browser window," but even changing that option to "Lock player at optimal size" does not help all that much.

Why is the quality decreasing so much? Is Storyline bitmapping the text and vector images, rather than just playing the Web Object as is? What can I do to improve the quality (please don't say change my Player setting to "Lock player at optimal size, we all know that's not practical)? I am forced to use Animate CC created Web Objects to work around Storyline limitations, unfortunately, so the drop in quality is really a bummer.

Thanks for any info you have about this issue. I assume that others are affected also.

Pinned Reply
Steven Benassi
9 months ago07/18/23 at 1:31 pm (UTC)

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 78 (Build 3.78.30680.0)!

Included in this release is the fix for the bug: HTML5: Web Objects With Images Are Blurry.

Now all you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

Please let us know if you have any questions by reaching out to our Support Engineers directly.

Have a great day!

58 Replies
Darrell Lagace
8 months ago08/28/23 at 4:13 pm (UTC)

This didn't fix it for me. I even deleted the existing thumb pictures (from before I updated) and reuploaded (after updating).

My images (with text) were created in Adobe Illustrator plenty big enough and exported as a png. They are fine when uploaded to the slide as a picture, just not as a slider thumb.

I can see that the picture is automatically being resized to small, making me have to enlarge it manually (which is where the resolution loss is coming from). 

Are there any other ideas?

Eric Santos
8 months ago08/29/23 at 2:19 pm (UTC)

Hi Darrell,

Welcome to the E-Learning Heroes Community! 🎉

I'm happy to chime in! I tried using a picture as a slider thumb image, and it was scaled correctly—no need to resize, as shown below:slider thumb imageIf you're already using the latest Storyline version, it would be helpful to see the Storyline file and the images to understand why they are blurry when used as slider thumb images. Do you mind attaching your project and the images to this discussion or privately in a support case? We'll delete it when we're done testing!

Nadia Field
4 months ago12/22/23 at 10:34 am (UTC)

Hi Jürgen. I've tried your code which has fixed the blurry problem on my embedded pdf. However, I'm now getting a duplicate window in the bottom of my web object. Any idea how to fix this please?

I used this javascript code that you suggested:

if( window.cssPatchWebObject !== "done") {
  style = document.createElement('style');
  style.textContent = `
    .webobject {
      width:  100% !important;
      height: 100% !important;
      transform: none !important;
     };`

  document.body.appendChild(style);
  window.cssPatchWebObject = "done";
}
Nadia Field
4 months ago01/02/24 at 10:20 am (UTC)

Thanks Jürgen. De-selecting "scale with slide" sorts out the quality issue. However, now I've lost the bottom half of my PDF scroll bar as seen here:
https://360.articulate.com/review/content/ef12a725-4850-4ee5-bfdb-5b6757e0837e/review.

I've uploaded my .story file so that you can see what I've done. Slide 1.1 is my output slide. Slides 1.2 and 1.3 explain the process I used to embed the PDF and the html code. I don't know if there's an easier way?

Thanks very much for your help! 

Jürgen Schoenemeyer
4 months ago01/04/24 at 8:46 pm (UTC)

your index.html is very strange - here is a much simpler version of the file

<!DOCTYPE html>
  <html lang="en">
  <head>
    <style>
      object {
        position: absolute;
        left:     0;
        top:      0;
        width:  100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <object data="CompletedPESTLE.pdf#view=fitH" type="application/pdf"></object>
  </body>
</html>

(the pdf not integrated with an iframe, but with a html object tag)

Sign In to Reply