Streaming live at 10am (PST)

Blurry font on rotated menu in Chrome


#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.


#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.


#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.