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

By Xah Lee. Date:

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


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


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

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

and with following CSS:

pre.x {
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:

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

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials