Web Objects blurry, especially text

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

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

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?

Hi, I have checked an I am using the latest Storyline version as of March 2024. But I am still finding when adding an online pdf via a url link that the text is still showing as blurry. any other tips on how to fix this?

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!