Blurry images and text and flickering in Chrome/Safari

Design help General
#1

Hi there!

I hope I do everything right since this is my first post.
I’ve been having many issues that I can’t seem to solve with my new site so I’d love your help.

ISSUE:

  • Blurry images and text on Safari when transform occurs (screenshot) ;

I tried to search for these issues and tried everything that I could find but I coulnd’t make it work, like
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

But no luck.
I’d love some help since this is driving me nuts :slight_smile:

Thank you in advance.

Here is my site Read-Only: https://preview.webflow.com/preview/portfolioedo?utm_source=portfolioedo&preview=cb44f623bee617153d978b8fc41ef682

#2

Are you on a retina display? If so, you’ll notice standard definition images. You can upload 2x sized images and render them at 2x if you want high resolution for retina displays.

for text smoothing you can try adding this to your site custom code.

<style> 
body { -webkit-font-smoothing: antialiased; }
</style>
#3

Hi there! Thank you for your response.

I tried retina images but it’s still all blurry in Safari.
I’ve also tried the custom code you pasted but it didn’t work.