Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Weird IE8 layout glitch - why does the body background disappear?

This is one of those "what the bloody hell" problems that I don't even know how to approach.

I have this website: http://www.mojalbum.com and if you open it in IE8 it loads fine, and after half a second the layout gets messed up. If you then resize the window it gets back to normal. Also if you open developer tools and disable and re-enable a CSS property (does not matter which one) the layout gets fixed too.

Unfortunately I can't remember when this started happening so I don't know what I did that caused this. And I really have no idea what to do. I've spent 3 hours searching for a solution on google without any luck (to be honest I'm not really sure what to search for).

Here is the messed-up screenshot: enter image description here

And this is how it should look: enter image description here

I'm using Internet Explorer 8 (v 8.0.7601.17514) on Windows 7.

Edit: I've now managed to (kinda) isolate the problem. If jQuery (v1.6.1) is included on the page then this thing happens. Including jQuery v1.3.2 does not cause this problem.

like image 424
Jan Hančič Avatar asked May 27 '11 08:05

Jan Hančič


1 Answers

The answer below is now mostly obsolete, because the problem has been fixed as of jQuery 1.6.2, which has been out for a while now.

If you're having this problem, just upgrade jQuery to the newest available version.


Edit:

There's something wrong with jQuery!

If I switch to 1.6.1 hosted from Google, it still breaks: http://jsbin.com/epata3/3

If I move the script to inside the head, it works: http://jsbin.com/epata3/4

And you're right, everything works as expected with 1.6.0: http://jsbin.com/epata3/7

???


There's something wrong with your jQuery include.

This simple test case breaks in IE8 in exactly the same way:

See in IE8: http://jsbin.com/exomi4

The background flashes red, then turns white.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style>
body {
    background-color: red;
}
</style>

</head>
<body>
<script type="text/javascript" src="http://www.mojalbum.com/js.php?f=core/jquery_1.6.1.js,&c=v2"></script>
</body>
</html>
like image 89
thirtydot Avatar answered Sep 18 '22 17:09

thirtydot