Floats not staying inside div in webkit browser, but do if cached.

Question

Hiya All,

I have a rather strange bug which i can't make sense of that is apearing in webkit based browsers (chrome and safari).

When this page http://bluprintliving.mammalworld.com/turnmill-street loads for the first time the content seems to jump out of the container but only at the end of the render. on refresh it stays in and behaves. Generally the page in cache and out of cache looks different.

Anyone have any ideas or clues they can shed on this issue?

Much appreciated.

Shadi

** Update **

Bug appears in:
Chrome: 4.1.249.1064 (45376)
Chromium: 5.0.349.0 (40908)
Safari: 4.0.5 (531.22.7)

Answer 1

It could very likely be the document.write of the CSS tag in your cufon.js script.

Webkit browsers have some weird issues with inserting document.write at random times during page load, especially on un-cached loads. It's far safer to use DOM compatible insertion methods than to use document.write for adding content to the page. (NODE.appendChild() comes to mind) I didn't dig deep enough to see if your issue could be explained by that file loading late, but if you're utilizing any CSS code from that file on your front page it may be getting loaded well after the actual content of the page, thus causing your "jump".

What makes me think of this is that I've come across this before when using Tiny_MCE, which was using document.write to insert code in much the same way, and having problems with the code appearing at random places in the document.