Streaming live at 10am (PST)

Text blurry on Safari, wonky rendering

Just launched my new portfolio site. It renders perfectly in Chrome and okay in Firefox, but horribly in Safari. The text is blurry, pixilated site-wide. Initially from what I can tell, seems to be only affecting text that has an interaction applied directly OR to a parent element.

Also noticed that my signature appears to be cut off when rendered in Safari and Image hovers take nearly 2 seconds to render correctly once mouse hovers over them.

Would very much appreciate any help you could offer! I am on latest version of Safari on Mac OS Mohave.

Shareable link: https://preview.webflow.com/preview/rvrmakes?utm_source=rvrmakes&preview=f8e43e575213698ef6f704911069e307

Link: https://rvrmakes.com

Safari:

Chrome:

Found several threads related to this issue, but was unable to solve using solutions others provided.

I tried pasting this in custom code. Issues still present.

For me, it’s crisp in Safari, blurry in Chrome.

Instead of using SCALE on your text elements, which will end up in various rendering accross systems and programs, try using font size in your interaction.

Thank you for the reply Vincent.

There doesn’t seem to be a “font size” option for my timed page load interactions - I only see “size” unless I’m doing something wrong?

I tried SIZE and it just changes the height of the line, not the actual text size.

Any ideas? Thanks!

Hi @rvrmakes, thanks for the post. I took a look, it seems there is a transform applied to the text:

Transforms can cause text to go blurry on the rendered page, I would try to apply the transform to the parent element instead to see if this will help.

This is a common issue for webkit browsers when rendering text using transforms and may not affect all fonts.

See here for more info: https://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/

I would at first remove the transform, then republish and see if that helps and also try applying the transform to the parent element (that may or may not work to apply to parent element).

Hi @cyberdave, thank you for your reply. I just removed the transforms. Still seem to have the issue.

Will definitely read up on the link you shared.

Hi @rvrmakes, ok, that is one possible style that need to be updated on the text, the parent also has a transform, I would start by removing the transform on that also and maybe check if there is any other transforms applied.

Once you get to the point where the text looks good, then things can be tried to get the transforms you were seeing working without text getting blurred.

See the parent element:

Those can be tricky because the different browsers render it differently.

@cyberdave That worked! The parent transform was the culprit. :slight_smile: I had set origins for the scrolling interaction to move along the Z-axis. Now have to figure out how to make that happen without the blur.

THANK YOU SO MUCH. Learning more each day.