IE 9 Becoming a Nightmare! May All its Developers Get Fired!

**KennyP** · 08-24-2012, 11:33 PM

Hi guys,

Do you know what MS did with IE 9 to cause the following issue?

In IE 7 and 8, the pages of a site I built for a friend loaded very smoothly with a jquery fade effect on loading and on onloading when navigating from page to page. However, suddenly with IE 9 the same pages are now preceded with a completely white page, and then they're followed with white sections within the main body content, until finally the page displays completely. What did they do to it?

--Thanks

**keyboard** · 08-25-2012, 12:54 AM

I'm using IE9 and it looks fine...

**bernie1227** · 08-25-2012, 12:55 AM

I however am also getting a white screen first on ie9

**bernie1227** · 08-25-2012, 12:56 AM

have you tried preloading? images, as there seem to be a lot of images on the site,
have a look here at the dynamic drive preloading script

**KennyP** · 08-25-2012, 01:39 AM

Thanks for your reply guys.

Bernie,

As a matter of fact, one of the reason page transitions were so smooth in IE 7 and 8 is because all images preload during the welcome page display, which is the reason I added the welcome page to begin with. Also I added the following meta tags which really made the transitions extra clean and smooth...

Code:

<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">

Now neither of these seem to be having the effect they had with IE 7 and 8.

**bernie1227** · 08-25-2012, 02:00 AM

the problem is that ie9 handles preloading slightly differently. What are you using currently in order to preload?

To be honest, the difference isn't that noticable and the amount of users using ie9 probably won't be that big.

**KennyP** · 08-25-2012, 02:28 AM

The following is a sample of how all images are preloaded, which still works great in FF, but I'd like to get transitions as smooth as they were in IE 7 and 8 as well:

Code:

<style>
div#preloaded-images {
   position:absolute;
   overflow:hidden;
   left:-9999px; 
   top:-9999px;
   height:1px;
   width:1px;
}
div#backgd {
	background:url(http://www.billyjoeconor.com/images/bg.gif) no-repeat -9999px -9999px;
}
</style>

<body>
<div style="margin-left:0px; margin-top:1px; margin-right:0px;" id="backgd"></div>

<div id="preloaded-images">
<img src="http://www.billyjoeconor.com/images/bg.gif" width="1" height="1" alt="Image 00">
</body>

**bernie1227** · 08-25-2012, 02:41 AM

so you're not using javascript to preload? You may want to in order for it to work on ie9, refer to the link posted earlier.

**jscheuer1** · 08-25-2012, 02:45 AM

First thing I would try is disabling the IE proprietary transitions for IE 9. IE 9 acts more like modern browsers and as such these proprietary transitions can often cause problems in it. To do so (additions highlighted):

Code:

 . . . eng+1) {
    start=0
    if (repeat==0)
    return
  }
  setTimeout("titlemove()",200)
}
if (document.title)
titlemove()
</script>        -->
<!--[if lt IE 9]>
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
<![endif]-->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="robots" content="index,follow,archive">
<meta name="description" content="Billy Joe Conor bri . . .

To really see if this is helping or not, the comment tags above should be applied to all pages. After that the browser cache may need to be cleared and/or the pages refreshed to see changes.

Do it and leave it up like that even if it doesn't fix it, that way we can see what else might be at issue.

**KennyP** · 08-25-2012, 03:13 AM

Thanks bernie, and thanks John. I'll try adding if IE tags and see if it helps.

EDIT: Thanks John, but unfortunately it doesn't help. It's a shame what IE 9 is doing to the great fade script you had written for me a year ago. I'll search for the loading script and try it.