Blurry font on rotated menu in Chrome

Design help General
1

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
2

hi @Dragan_Miletic maybe anti aliasing ?

Try this

   <style>

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

</style>
3

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

1 Like
4

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.

5

Have same problem, something is wrong with anti aliasing

6

Hmm… These are bad news.

7

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

8

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.