Image quality gets blurry in preview/export

Note that there are no scaling in this picture so it's not the % issue.
Everything is is at 100%.

Top CTA is inside Hype
Bottom CTA is a preview. (Looks the same when exported)

What could be the issue?


Can you share information about the browser and maybe a sample Hype document?

One thing to try is to uncheck “automatically optimize when exporting“ in the resources library when you have that image selected.

Thanks for the answer Daniel.

I tried both with and without “automatically optimize when exporting“ with the same result.
Also I get the same result with Safari, Chrome, Firefox and even Opera. Very strange.

Attached a a file. One with animation and one without. Same result.

While looking at it have a look at the rotation angle animation. Never understood that in Hype. 90 is never 90 etc. Why is that? (162.0 KB)

While it will not be edge-perfect because it is still a stretched image, I'm only able to reproduce the extreme blurriness in Chrome (though I imagine it happens in Opera and Edge with the same codebase). Safari to me looks the same as Hype, which is what I would expect.

I tested against Chrome Canary version 96, and it appears fixed there. I'm guessing it is a Chrome bug. Does it look better for you with that version?

If you can still reproduce in Safari and Firefox, please let me know which versions of macOS, Safari and Firefox you are using, along with your basic monitor setup (how many, which are retina, etc.).

It does look like a workaround in Chrome is to uncheck Use WebKit graphic acceleration in the Document Inspector.

This is due to perspective. You can put 3D rotated items in a group and if you change the group size/position to change it. Alternatively you can override Hype's CSS like mentioned in this post:

You can probably do similar stuff with the perspective-origin property which may also help depending on your usage.