Here is a little css bug in category style box mode…
1.3.0 beta1 is the discourse version.
Chrome version : Version 38.0.2125.111 m
What browser are you using and what version is discourse on / on what site do you see this?
It happens on any site if the font size is zoomed in or out.
In my case, I have to set meta.discourse to 110%, and you can see a slight misalignment.
75%: 
90%: 
100%: 
110%: 
175%: 
I can see a teeeeeny tiny misalignment at 90%, but nothing nearly as severe as previously screenshotted…
Anyways, the left part is styled with line-height: 24px and I’d assume that font hinting is causing this to be scaled differently then a straight up height: 24px. In fact, applying height: 24px to the element in the inspector results in both links having the same height even after scaling…
2 Likes
and why aren’t you mentioning what browser you are using 
Fine for me both at Firefox Developer Editio 37.0a2 (2015-02-22) and Chrome 41.0.2272.64 beta-m.
Apologies. I’m using Firefox 35.0.1 on Ubuntu Gnome 14.10. I have it set to zoom text only.
On Meta I see the slight misalignment as in my screenshot, because I have meta permanently set to 110% zoom. On SitePoint, which I normally view at 100%, I can also reproduce the issue using zoom:
110%
133%
1 Like
1.3.0 beta1 is the discourse version.
Chrome version : Version 38.0.2125.111 m
The site is dinozor.org which you cannot see the bug right now because i am using the bar category mode.
Here it is at 300%. Chrome Version 40.0.2214.115 m.
Don’t really see any difference. This was taken from here at Meta, by the way.
Here it is in Photoshop. I see no alignment problem:
I believe they were referring to Firefox though
I was referring to chrome and firefox. Updated my original question with version info also.
Changed the site to box mode again, you can see the bug, dinozor.org
I can reproduce the problem in Firefox 35 as above on all sites - here, SitePoint and dinozor.org.
In Chromium Version 40.0.2214.111 Ubuntu 14.10 (64-bit) I can only reproduce the issue at 90% zoom, for some reason - but again, it affects all sites. (Screenshot is from SitePoint, as the colour makes the issue more visible.)
Yeah, welcome to the wonderful world of font rasterization, one of the darkest kinds of computer magic. Different libraries will produce different results, the same library may produce different results on different platforms, the same library may even produce different results on the same platform but with a different monitor!
Font rasterizers were never written with consistency being the goal, but simply making the result look good. If that means that a 20 pixel glyph, scaled down by one third, ends up being 14 pixels high instead of 13 despite the rounding error, then so be it.
Just give the thing a fixed height instead of a line-height and be done with it… 
2 Likes
I somewhat cleaned this up with
https://github.com/discourse/discourse/commit/8248abf73caded433151b8ab5f00cf7839729baf
But I think @awesomerobot needs to do another round of cleanup here, we need to pull all of the box styling into badges.css.scss, its all over the place now.
4 Likes