WebKit Bug 29055.

After this last redesign I spent days tearing my hair out over one nasty little alignment issue I couldn’t figure out. In the masthead, this markup:

<p>
  <i>by</i> Eli Naeher
  <br>
  (<a href="http://portfolio.flyoverblues.com">
    hire me
  </a>)
  <br>
  (<a href="mailto:eli@flyoverblues.com">
    send me mail
  </a>)
  <br>
  (<a href="http://codeanddata.com/pgp.txt">
    encrypt it
  </a>)
</p>

looked like this in Chrome:

Image showing WebKit rendering problem

As you can see, the last line is slightly to the right (or, more accurately, all lines but the last are slightly to the left of the rightmost edge of the containing paragraph).

It turns out that this is WebKit bug 29055 (though the bug describes an issue where text-align: center rather than text-align: right, the problematic behavior is the same). It seems to manifest only when a series of lines are interrupted with <br> elements—if the text is allowed to wrap naturally it renders correctly.

Of course, you can easily work around this bug by adding a trailing <br>. Nonetheless it worries me that the ticket was opened in 2009 and has apparently seen no activity whatsoever since.

September 2, 2011