Streaming live at 10am (PST)

Trouble with Hover interaction


#1

Hi,
After increasing the scale of my navlink when being hovered the font becomes blurred.
Does anyone know how to fix this?
Please help :frowning:

Here is the website: http://compass-tech.webflow.io/


Here is my public share link: http://compass-tech.webflow.io/
(how to access public share link)


#2

Here's how to correctly make a read only link. :wink:

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#3

Hi @ItamarKamar

During the transition, the font is being animated and will look a little blurry. This is what happens when you animate text.

Hope this helps :slightly_smiling:


#4

Adding this piece of code into your head tag helps with this issue.

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


#5

That piece of code doesn't seem to be working.
Is there anything else that help?

Thank you!


#6

Hi @ItamarKamar, I would try and change the font for those navlinks to use EM values instead of PX unit of measurement.

Let me know if that helps.


#7

We learned in the workshop tuesday that VH/VW values for text isn't a good way to work and to use EMs instead. He might want to try that too.


#8

Good catch @DFink :wink: Yes, I think that will help over PX. If not, might also check another font, it could be font specific.


#9

Don't use interactions...

Select your link and in the transitions menu select transform and set for example 500ms

On hover state set the scale you want.

This way you only see the text blur while the scale happens.

This is chrome bug.


#10

Thank you!
I forgot to thank you guys, it's working well with EM values :slightly_smiling:


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.