Question

I am post loading jQuery and it is causing a CSS error in Opera (and Opera alone). I’ve created a JSFiddle to demonstrate.

Having some CSS that styles the HTML and BODY tags like:

html {
    background: #6B9AB6;
}

body {
    background: white;
    max-width: 10em;
}

Then post loading jQuery (using a simple setTimeout for demonstration purposes):

setTimeout(function(){

    var script_tag = document.createElement('script');
    script_tag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';

    var script_sib = document.getElementsByTagName('script')[0];
    script_sib.parentNode.insertBefore(script_tag, script_sib);

}, 2000);

Causes the correct CSS to display, then flash to an unstyled HTML tag. Using Opera’s DragonFly and changing either the background-attachment or background-origin dynamically fixes this. The same is not true if you do this programmatically.

Is there a way to make Opera behave with postloaded jQuery? Feel free to update the JSFiddle if you have any ideas.

Answer 1

Its a regression in jQuery version 1.6; jQuery version 1.5.2 works just fine.

For now there is a patch by Aderty:

The bug can be resolved on ligne [line number] 1288 from jquery-1.6.1.js.

Replace :

“documentElement.insertBefore( body, documentElement.firstChild );”

by

“documentElement.appendChild( body );”

which works wonders if you are self-hosting the library.

EDIT: Version 1.6.2 has a fix for this issue (currently in jQuery’s GIT repo).