StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There seem to be a kind of race condition in the loading of css. The following file reproduces the bug here on Chrome (17.0.963.65) on osx 10.6.8. </p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Schizophrenic layout</title> <style type="text/css"> body { background-image:url('gray.png'); } #d0{display:inline-block;} #d1{text-transform:uppercase;} #d2{text-transform:uppercase;} </style> <script type="text/javascript"> function fill (id, text) { var e = document.getElementById (id); var t = document.createTextNode (text); e.appendChild (t); } function main () { fill ("d1", "First line"); fill ("d2", "Second line"); } window.onload = main; </script> </head> <body> <div id="d0"> <div id="d1"></div> <div id="d2"></div> </div> </body> </html> </code></pre> <p>Note that the bug is present even if <code>gray.png</code> is not a 404. You may have to reload the page a few time to witness the bug. Also if you don't GET the file over http, the bug shows only once, the first time you load the page from the disk.</p> <p>There are various ways to make the bug disappear by tweaking the css. Removing only the <code>background-image</code> makes it disappear. Removing only the <code>display</code> makes it disappear. Removing only the two <code>text-transform</code> make it disapear. In the latter case the correct layout can be achieved by adding </p> <pre><code> e.style.textTransform = "uppercase"; </code></pre> <p>at the end of the <code>fill</code> function which is, of course, a very ugly workaround. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload