Web Objects blurry, especially text

I'm experiencing the same issue Paul. I've got web objects generated from Adobe Animate that look poor in Storyline. Forgive me if you've been down this road already, but if make my animate source files high resolution (such as 1920 x 1080) and my Storyline file that large as well, it will display with good resolution... until the browser gets smaller, then the quality or sharpness of the web object decreases.

Hello Chris. Thanks for the input. I have tried that. However, I find that it changes the size of everything in the wrapper, which is not desired.  Have you found that also? If so, what did you do about that? Just live with it? Up the font sizes of text?

Also, the goal is to make it look good at all browser sizes, not just at HD resolution. If I'm creating an Animate Web Object at a certain size, it should at least look good at that size. I'm a little weary of finding work arounds for Storyline issues/bugs.

It would be nice to have Storyline fix the issue. It looks worse within Storyline than it does in the published WebObjects folder itself. With older versions of Storyline 3, specifically Storyline 3, Update 9: 3.9.21069.0, everything looks fine. Something changed in their publishing architecture that created the issue. I have documented some of the changes in one of my comments.

I am experiencing the same issue as others have reported here. Web Objects look fine outside Storyline. When they play within Storyline they look very blurry. When should we see a solution implemented?

We are still very interested in resolving this issue as well. We've had to use other development platforms for projects that involve web objects because the quality is a no go.

I don't know if this helps, but it seems to have something to do with a transform: scale in the CSS on the container with classes of ="webobject is-scrollable". Hopefully some expert at CSS can help us figure out how to override or something. I'm attaching a video. 

What's weird is, I am transferring courses from captivate to articulate. I published a software demo from captivate as html5 and embedded as a webobject in storyline 360 and it looked great! But when trying to embed pdfs in slide it looks soooo blurry.

Hi Samantha,

Thank you for the details about your pdf. With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Thanks Leslie,

I was just testing it out. It wasn't for anything real.

Hi,

I am not sure how this helps, but I have a similar issue.

I attach the .story file. I want to allow learners to navigate this view to look for answers.

I find the result on the slide much poorer than the web browser original. I published the experience in different LMS and used different browsers. Every combination returned the same blurry result. 

Hi Eric,

Thanks for sharing the original link along with the content inside your .story file. 

It looks like the content is scaling down considerably to fit into the 418px x 385px frame provided in your project.

We recommend adding content that does not scale up or down for the best quality:

Best Practices for High-Quality Images and Videos

I'd recommend allowing the web object to display in a new window so that it's not limited by the Storyline project size for the best quality:

We're running into the same issue. I don't know at what point it started happening (we had to downgrade from 360 to 3 for security reasons), but the culprit looks to be in the transform scale class (div object 'webobject' - element.style transform: scale). When I turn that off or set it to 1, it's clear as day (but obviously not scaled in the window) - turn on or change to any value but 1, blurry.

This seems odd, because i've built modals and actually iframes that scale in HTML and I've not run into this issue - so instead of doing a transform scale, I found that if i did some math (I tried this actually on the iFrame div, but I imagine it should work at the webobject level) and set a width and height based on the scale value and it was clear (I also removed the W=100% and H=100% from the parent webobject div).

My suggestion for a fix might be to add a script to get a W and H based on the scale (it looks like some amount of this is already in the library since the window is being 'moved' based on innerwindow) and use those values vs a transform.

Since this issue (or at least thread) has been out for a while, perhaps this will help for a resolution.

Best,
Lisa

That is awesome! You've figured out what Articulate could not figure out in years. Kudos!

While I get itchy having to create workarounds (and now jquery since it's not "packaged" anymore), this seems to at least resolve the issue. I also get itchy that someone at Articulate will rename classes at some point, so know there's a risk.

Hopefully the articulate developers will look and tweak their code to set the width and height based on the scale rather than using the transform class.

Either way...here goes:

NOTE - this solution requires jquery - use whichever method works best for you to ensure jquery is loaded. It could also be rewritten in native javascript (moderately safer, IMHO, based on experience with Storyline versioning),

--JAVASCRIPT TRIGGER CODE--
//This code is needed to fix bug where webobjects in Storyline appear blurry 11/21.

$(window).resize(resizeInteraction);

function resizeInteraction(){
var webObjWidth=$('.webobject').width();
var webObjHeight=$('.webobject').height();
var stageWidth=$('#frame').width();;
var scale=(stageWidth/webObjWidth);
webObjWidth=(webObjWidth*scale);
webObjHeight=(webObjHeight*scale);
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' });
}

$(document).ready(function () {
resizeInteraction();
});

----

I might also suggest if you use any workarounds to "fix" these bugs that you keep a log of where you used them...I only say this because there have been way too many times that a bug-fix is finally made for things which then breaks the workarounds (this goes not only for javascript, but other workarounds) when files are maintained. For me, this is so frequent that I actually append the words FIX-*description* to my objects, layers, etc. just to call out that at some point I had to do something really crazy to fix bugs.

Best of luck!
Lisa

I'm also having this issue with blurry results in a web object. In my case, it's .PDFs. Trying to work with Lisa's solution above, but haven't had any luck yet.

Hi Kel,
I don't know if this will work for you or not, but I updated this a couple of months ago to resolve resizing of the object with the browser.
I initiate jQuery (as a failsafe) on the slide when timeline starts, then I set this to start at .25 seconds (to ensure it's loaded). Again - not ideal by any measure - but I guess better than webobjects that look like an amateur overcompressed them :).

var initStage=$('#slide').width();
var initObjWidth=$('.slide-object-webobject').width();
var initObjHeight=$('.slide-object-webobject').height();
var webObjWidth=(initObjWidth);
var webObjHeight=(initObjHeight);
$('.slide-object-webobject').css({width: webObjWidth, height: webObjHeight}); 
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' }); 

$(window).resize(resizeInteraction);

function resizeInteraction(){
var stageWidth=$('#slide').width();
scale=((stageWidth-initStage)/initStage+1);
var webObjWidth=(initObjWidth*scale);
var webObjHeight=(initObjHeight*scale);
$('.slide-object-webobject').css({width: webObjWidth, height: webObjHeight}); 
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' }); 
}

I mentioned before this could be written in pure javascript (safer), but I keep hoping there will be a native solution. Perhaps your issue will give this a little bump and their devs can look to see what I'm doing here - which is to scale using more precise values since the percentage method doesn't seem to get precise enough (I want to say it rounds or something) and if something is just like one pixel off from "perfect" from original, images can look blurry (I run into this in regular images as well, actually - it's especially evident on system screens - they never look as clear as the original).

Fingers crossed that helps or at least points you in a direction to a fix.

Best,
Lisa

This was the best and easiest solution that I have come across for this issue.

<style>
  .webobject {
     width:  100% !important;
     height: 100% !important;

    transform: none !important;
  }
</style>

integrated at the end of story.html, index_lms.html should do the same result without javascript

example - trackable vimeo video player in web object

before:

after:

=> interface of the videoplayer has a fixed size

before:

after:

Hello, I am experiencing still the same problem. Highly reduced quality and blury text after insterting it in Storyline 360 - latest update. Is there any solution so far?

Hi Prakti,

Sorry to hear you're also having issues with blurry text in Storyline Web objects. We're still looking for a fix, but since you are now subscribed to this discussion, we'll notify you once it is available.

In the meantime, would you be willing to share a copy of your Storyline file here or privately through a support case so we can make recommendations? We'll delete it when we're done testing! 

the problem is the scaling with css transform of an iframe, that triggers the blurred text

add this small javascript on the slide with your web object

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";
}

now the web object is not scaled anymore - the text is sharp

Thank you very much. I will try it out. 

Adding the javascript worked for me! Thank you so much for sharing this solution.

Jürgen Schoenemeyer JavaScript snippet works perfectly, thanks!

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!