Streaming live at 10am (PST)

Blurry font on rotated menu in Chrome

Strange… this is only happen when I put a small interaction on arrow below right picture. When I remove interaction on arrow or when I rotate menu to original position, menu font becomes normal. When I preview site in Firefox or Safari, everything is fine. I disable all extension from Chrome, also try in incognito mode, still the same…
Here is the link…
https://preview.webflow.com/preview/modamax?utm_source=modamax&preview=474a5d38729ae0bfe2ff50dded016adf

Has anyone had such a problem?

Thanks in advance.

1 Like

hi @Dragan_Miletic maybe anti aliasing ?

Try this

   <style>

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

</style>

Thanks @zbrah but still the same. Definitely something is wrong with anti aliasing.

1 Like

Transform property making things blurry in Chrome is an old known bug which was never resolved. There are countless versions of “fixes” but they never worked for me.

Have same problem, something is wrong with anti aliasing

Hmm… These are bad news.

Yep. You may try the numerous solutions from here for example.

None of this works @dram but, I find another solutions. When I apply transform to Nav Menu, not on Navbar component, text is not blurry. Just to find a way to align them both because Navbar component and container that contain Nav Menu and links, still stand horizontally, but… I hope this is a temporary solution.