Display Bug in IE8 8.0.7601.17514_问答_开发者_运维开发者技术经验分享

I am seeing a weird intermittent display bug on one of the sites I manage. It only seems to happen intermittently, and on certain machines running Windows7 SP1 and using IE8.0.7601.17514. I have not been able to repeat the bug on any other configuration including Windows7 ie9, ie8, ie7 (last 2 simulated with ietester), WindowsXP with IE8, firefox, chrome, safari etc. It's also worth noting that sometimes you get this bug, other times not, even on the same page.

The problem seems to be that content from a mega drop down menu is coming to the top and displaying in random places (see http:www.brenclosures.com.au/images/aaa-image003.jpg)

You can see the problem in the header of the site as a rectangular box with some icons in it. It's worth noting that this isn't in a consistant position, but moves around. I've seen it completely across the top, over the logo, on the other side, in the search box etc. You can't select it and it quite often moves and shows something completely different even if you just refresh the page!

I am using Spry for the menu system. This is showing an error on some pages that relates to line items not including links, but I have fixed that on some pages and I'm still seeing the problem.

I'm also using jQuery and it at 1.3 on most of the site. However after looking at similar posts I have updated to 1.6.4 on some pages, but those are still showing the same problem. I've just requested that the person seeing this problem (which unfortunately happens to be the client) test pages with jQuery off altogether to see if that makes any difference.

I'm also running the jQuery fancybox plugin, which I guess also includes jquery.easing.1.3

Has anyone got any ideas on what may be happening? I don't think it is a hardware issue as we have also seen the bug once in a virtual machine, although we have been unable to repeat it!

The site URL is http://www.brenclosures.com.au if you want to have a look for yourselves.

I'd really appreciate your help as this one has me completely stumped!

Cheers Simon

I wish I could embed one, but I'm a new user and am limited in what I can do. They link at the end of the second paragraph is to a photo showing the problem. Sadly I didn't get a screen shot of the graphics appearing in the search box, which was my personal favourite!

I have also just heard back that upgrading jquery to the latest version didn't solve the problem, but when I took jquery, jquery easing (1.3) and fancybox off, that did, so the problem is jquery related. I'm now looking to update all of these and see what happens. I'll let you know when I do.

Thanks Simon

Ok, I think I'm starting to get a handle on what's happening. I have no idea why though!

This seems to only affect IE8 and only with jQuery on. It doesn't seem to be an issue with fancybox or jQuery Easing, just jQuery itself. Switch that off and the problem goes away.

Having said that the bug doesn't seem to relate to anything that jQue开发者_C百科ry is actually doing. What seems to be happening (and why only certain machines seem to be affected at certain times is as follows: -

Occasionally the background gradient or the png swoosh seems to get delayed in loading, despite the fact it is up the top of the stack.
IE8 seems to reserve a spot for the image even though there is a delay
As nothing is there somehow jQuery has the effect that it loads a random background image from the CSS as a replacement
Once the 'real' image loads in, the problem goes away. However somehow in IE8 these images seem to have a habit of getting stuck!

A solution therefore seems likely to be preloading the background images but only in IE8. I have added in a preloader now and hopefully the problem should go away! I'll post again if it doesn't!

That didn't work either! I should have thunk! If the images are getting stuck, loading them with a preloader isn't going to help that much!

My latest plans are: -

Use sprites so that all images load at once. This will prevent other parts being shown when as everything will load at the same time. Danger is that nothing will load.
Use cache control so to set a long TTL for the background images. Hopefully this will mean if they load successfully once, you won't see the same problem again. Trouble is here that these images are on a shared Windows server so cache control isn't as easy a tweak of an htaccess file. I'll probably modify the CSS for IE8 so that I can send these to a Linux server instead!

Latest Update. I have tried all sorts of techniques and the best I can say so far is that I have made the problem seem to go for about half a day or so. Things I have tried include: -

Loading images from a different URL where I can also cache them on the browser. This was an attempt after I found that the problem seems to show particularly when the png's in the header got stuck loading.
I really thought I had it with this one! I changed the jQuery so that instead of the normal control to start loading when the page finished loading, I changed it to the onLoad function so that it supposedly waits until all the assets have also loaded. That one worked for about half a day!

My last effort, before I just ask them to upgrade to IE9, will be to rewrite the whole menu system in jQuery and remove all Spry from the page. I have to say that I don't actually have high hopes for this one. I need to do it anyway, but I have found that removing Spry from the page doesn't seem to have any effect.