Blurry text on transform:rotate in Chrome

css google-chrome text rotation transform

It happens in Webkit browsers such as Chrome and Safari. Try adding:

-webkit-transform-origin: 50%  51%;

and you would be fine.

css google-chrome text rotation transform

try adding and check if this works (as a hack):

transform: translateZ(0);

css google-chrome text rotation transform

This worked for me.

zoom: 1.005;

Hope this helps you too.

This will make your content a little bit big but the blur problem will be solved. Hope this was helpful for you.

CodeHunter