Web Objects blurry, especially text

Okay, I've rigged up a sample to demonstrate the problem (see attached zip file). It has everything you need to reproduce the issues. There is:

• An Adobe Animate CC file that is used to publish the Web Object
• The Web Object itself
• A Storyline file that embeds the Web Object
• An "Examples" folder with screenshots of the issues

You can clearly see that the Web Object with the Storyline publish is much, much lower quality than the actual Web Object itself found in ... story_content\WebObjects\6TlShZk93OQ

You can also clearly see that the line spacing for the bullets in the published project is different than it is in the Storyline file itself. Keep in mind that everything was fine in an earlier version of Storyline 3, including the Web Object quality. It was only when installing latest updates to Storyline 3, or using latest version of Storyline 360, that quality degraded. Also, we have multiple courses with 80 pages or more, so touching/reformatting the Notes for every screen is not a practical option, even if that did work.

Again, as detailed above, something changed on your end as far as publishing courses. That is plain to see. I think that's where you should start looking. If you publish the attached file in older version of Storyline 3, it will look fine.

Hi Paul!

Thank you so much for sharing these details! I've shared these examples with our team, as well as the troubleshooting steps you've already taken. They'll be in touch if they have additional questions.

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. 

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.

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