Forum Discussion

PaulColby's avatar
PaulColby
Community Member
6 years ago

Web Objects blurry, especially text

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-SHA...
storyline 360
  • StevenBenassi's avatar
    StevenBenassi
    2 years ago

    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!

PraktiKant's avatar
PraktiKant
Community Member

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?

Jürgen_Schoene_'s avatar
Jürgen_Schoene_
Community Member
2 years ago

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

 

  • PraktiKant's avatar
    PraktiKant
    Community Member
    2 years ago

    Thank you very much. I will try it out. 

  • AngelaKim's avatar
    AngelaKim
    Community Member
    2 years ago

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

  • NadiaField-bb4c's avatar
    NadiaField-bb4c
    Community Member
    11 months ago

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