WebKit Bug: {pre, display:table}, Space Characters Not Rendered

By Xah Lee. Date:

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

Summary

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="x17375">
<span class="a18951">A</span> <span class="b96836">B</span>
</pre>

and with following CSS:

pre.x17375 {
display:table;
background-color:silver;
}
pre span.a18951 {color:red}
pre span.b96836 {color:blue}

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

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

See raw HTML here: webkit test

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

Actually this bug i reported before. See: CSS “pre” Problem: No Linebreak After Tag .

BUY
ΣJS
JavaScript in Depth