Webkit Bug: Pre Display Table Space characters Not Rendered

Perm URL with updates: http://xahlee.org/js/webkit_bug_pre_display_table_space_gone.html

This page reports a WebKit (Safari; Chrome) rendering bug.

Summery

When using “pre”, with CSS “display:table”, then spaces between “span” tags will not be renedered. Also, when copying the text, no space char are being copied.

webkit bug pre display table space gone
Screenshot of the bug in Google Chrome, 2012-03-15.

Notice the space between “use” and “strict” is gone. Also, space after “print”, and space after “my”

Detail

Create a HTML file with this content in “body”:

<pre class="x">
<span class="a">A</span> <span class="b">B</span>
</pre>

and with following CSS:

pre.x {
display:table;
background-color:silver;
}
pre span.a {color:red}
pre span.b {color:blue}

See raw html here: webkit test.

When rendered, there should be a space between the characters A and B.

If you remove the “display:table”, then it'll be fine.

Versions used, all latest public release for Windows as of 2012-03-15:

  • Google Chrome 17.0.963.79 m.
  • Safari for Windows: 5.1.4 (7534.54.16)

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs