2019-03-04 @ 12:20: Blurry text Browsers | Bugs

In case you use a Chromium based browser you’ll likely have noticed blurry fonts on this website. First I thought it’s related to font-smoothing, but I don’t use such CSS rules, because they are not part of the standard, yet. Also I checked if forcing the browser to disable font-smoothing changes the way the text is rendered. To my surprise it had no effect at all. So, it must be something else that breaks the font-rendering. In Firefox, Edge and IE the issue does not appear. To make a long story short, in Chrome 72 the text gets blurry if it’s positioned using

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

That is quite annoying, because you use this rule to center content where the absolute width and height is unknown. If it’s known you could use negative margins instead.

In Opera the positioning using transform does not affect the font-rendering. However, and now things are getting really weird, the cause of the blurry text is the border-radius of the surrounding div element. Wtf!? Yes, the border-radius causes strange font-rendering. And it’s independent of the actual font. A simple

border-radius: 1px;

is just enough to make it ugly. Additionally the size of the browser window affects the rendering, too. So, if the browser window is resized by 1-2 pixels, the blurring disappears. Here are some screen shots to illustrate the issue:

Chrome 72 using transform
Chrome 72 absolute positioning
Opera 58 blurry font
Opera 58 crisp due to no border-radius

Opera 58 nearly crisp due to resizing the browser window


Leave a comment

You must be logged in to post a comment.


  • About

    Destabilizing cishetero amatonormativity. Providing disruption as a service. Once you know the way, you see it in all things. Unless you puke, faint or die, keep going. Also we never asked for this. I̸͝t̸̑ ̵̽i̷͗s̶͐ ̵͝a̶͒l̷ ͍r̷ ̗͕e̵͑a̶͌d̸̄y̷̚ ̶̀ ͓͑t̷̚ô̶o̸ ̥ ̶́ ̡l̷͝a̶̽t̵͒ė̶.̸ ̋͑

  • Got something interesting?

    You think you got something which should be on this site? Then contact us. You want something removed from this site, because you think it should not be here? Then go fuck yourself. This is a free website. Free as in freedom. It tolerates every opinion from everyone. However, it does not tolerate things which are illegal according to the Swiss legislation.

  • Disclaimer

    We cannot be held responsible for any kind of direct, indirect or consequential damages caused by the stuff and or opinions we provide here. Use this on your own risk. Don’t blame us if something goes wrong or totally messes up your machine, your life or whatever. If this is unacceptable for you then go away and never come back again. Thank you!