Pretty annoying issue. Imagine the situation as I have pasted here. The contents of the test.js file would be the following:

$(function(){
	console.log("Hello");
	$("#test").fadeIn();
});

Seems all fine right? Well, for some reason, the #test division is not always being shown. It works maybe only once out of ten times. The "Hello" log message is always being shown though.

I've also tested this by replacing the jQuery function with

document.getElementById("loadingscreen").style.display = "block";

, which does work.

Now the funny part. If we place the above script in some simple <script> tags inside the HTML, NO problems occur. This made me really confused and I could only think of this being a jQuery bug.

Then there's a second strange thing. If I replace the path to a file from my system, to the one provided by jQuery, the issue doesn't occur either. I'm talking about replacing

<script src="<?=DOCROOT;?>/js/libraries/jquery.js"></script>

with

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Now, I tried creating a solution by doing the following:

$(function(){
	setTimeout(function(){
		$("#test").fadeIn();
	}, 50);
})

This did fix the issue but this is not the way how things should be fixed :P

Some additional information:

• I'm using Chrome version 26.0.1410.64 m
• The issue only occurs in Chrome. FireFox and IE10 seemed to work just fine.
• No plugins were enabled during testing.

Note: Creating a jsfiddle would be useless. The issue cannot be reproduced on jsfiddle. Best is to set up a test case yourself, using the information I gave.

In case this is not a jQuery bug after all, is there something else I can do against this?

Thanks in advance!