19

They're missing several pixels + the right border.

Missing border

Observed in

  • Chrome 12.0.742.112 and 15.0.874.106 (on Windows 7)
  • Firefox 5? (see comments)
  • Opera (see this report)
Improve this question
3
  • 1
    +1 for making me add ponies and thingadongdong to my favorite tags
    – balpha StaffMod
    Jul 11, 2011 at 14:02
  • 1
    I don't believe this particular issue is actually reproducible in Firefox (I checked in various browsers). The answer below is referring to something else that looks kind of the same, I think.
    – Tim Stone
    Jul 11, 2011 at 14:13
  • 2
    i'm looking into this
    – Jin
    Sep 12, 2011 at 8:43

4 Answers 4

Reset to default
8

I'm fairly confident that this is a render bug in Chrome, which appears to be caused by the fact that the line wrap occurs at the end of an inline element that contains an inline-block element on its outermost edge.

It's also possible that this is a defined behaviour somewhere in the CSS3 specification since this issue only started appearing recently, but I haven't had time to check. It seems like rather undesirable behaviour though, so I'm still leaning towards bug.

That being said, it's fixable with a bit of a hack and without having to overhaul all of the CSS that's in play there. Since the edge is displayed so long as there's inline content at the end of the tag <a>, it's possible to just give it some:

#interestingTags .post-tag:after {
    content: '\200B';
}

Injecting a zero-width space counts for the purposes of rendering, but doesn't impact the expected display, nor does it interfere with the tag handling JavaScript.

Improve this answer
4
  • 1
    This has been around forever; not new and always specific to webkit.
    – Jeff Atwood
    Jul 11, 2011 at 15:45
  • Hm, I'm only able to reproduce this specific issue in Chrome though, and it only started a few months ago (but I ignored it at the time, since I'm on Chrome dev). Safari doesn't exhibit this behaviour, at least not here.
    – Tim Stone
    Jul 11, 2011 at 15:52
  • 1
    I remember it being reported on superuser since forever, and SU has been around for over a year. You might be right about it being Chrome only, though.
    – Jeff Atwood
    Jul 11, 2011 at 17:06
  • Was just about to report this for Chrome 15.0.874.121 m
    – Merlyn Morgan-Graham
    Dec 16, 2011 at 11:56
5
+50

I was hoping the Chrome team would fix this weird bug, but it doesn't look like they will. We have deployed the fix Tim Stone suggested. It will be in the next production build.

Improve this answer
4
  • Cool, thanks for your work on this.
    – Rob Hruska
    Jan 13, 2012 at 22:03
  • +1 for using my sockpuppet's code!
    – The Unhandled Exception
    Jan 13, 2012 at 22:15
  • Yeah, I had poked around the WebKit source looking for what was causing this to submit a patch, but I wasn't able to narrow it down at the time. :/
    – Tim Stone
    Jan 13, 2012 at 22:17
  • 1
    @TheUnhandledException LIES!!! I am so much better looking than Tim Stone!
    – Josh's Socks
    Jan 13, 2012 at 22:18
3

I can see a similar effect in FF5.

On SO, the last digit of the number of questions is incomplete: 1,822,31?

But I blame the browser, probably the zoom factor.

Improve this answer
3

Ah, I created duplicate here, but with the solution, so I'd move it there:

In Opera the tags on the second line and further don't have padding at the start, in Webkit there are no right padding and border on all lines except the last.

To fix it you can change the display of tags from inline to inline-block (and change some other style according to it).

There is a jsfiddle with the current and fixed variants: http://jsfiddle.net/kizu/EaveS/

So, to fix it you must replace the following lines in the selector for the tags:

font-size: 90%;
line-height: 2.4;

to

display: inline-block;
font: 90%/1.2 Arial, sans-serif;
margin: .33em 2px .33em 0;
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .