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.
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.
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.
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 @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.
@cyberdave That worked! The parent transform was the culprit. 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.
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.