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)
1
  • 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
    Commented Jul 11, 2011 at 14:13

4 Answers 4

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.

4
  • 1
    This has been around forever; not new and always specific to webkit. Commented 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
    Commented 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. Commented Jul 11, 2011 at 17:06
  • Was just about to report this for Chrome 15.0.874.121 m Commented 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.

1
  • 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
    Commented Jan 13, 2012 at 22:17
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.

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;

You must log in to answer this question.

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