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, .

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 :

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

Like what you read? Buy JavaScript in Depth