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

**KennyP** · 08-27-2012, 09:28 AM

EDIT: Please see my last post - Problem Not Solved

I found the culprit that was producing the flickering effect (for the most part)

In order to improve an image caching problem for images in IE 8, I had entered the following code (from http://erik.eae.net/archives/2007/02/26/13.13.48/), and it worked.

Code:

document.execCommand("BackgroundImageCache", false, true)

When I just removed the above entry, suddenly the flickering stopped on most page loads, but not on all. The transitions however are still not as smooth and with the perfect fade-in and fade-out effect as they displayed in IE 7 and 8.

Please note however, when I previously tried removing the same above code in a page with the CSS image loading method (before replacing it with the new java image loader suggested earlier in this thread), there was none of this improvement.

I'm not sure what is happening, but if you guys do, would you please help me to further improve the transitions with the fade effect to be as good as in 7 and 8?

**molendijk** · 08-27-2012, 09:46 AM

Originally Posted by KennyP

If I understood correctly, I tried adding the image urls in the style tag after body as...

Code:

content: url(/images/billy-joe-conor.jpg) url(/images/brook.gif);

but it did not make a difference.

No, that should be in the head:

Code:

<head>
<style>
body: after {content: url(/images/billy-joe-conor.jpg) url(/images/brook.gif);}
</style>
</head>

Originally Posted by KennyP

I also took a look at the links displaying Page 1 Page 2 Page 3 in your sample, and I do notice no flicker is produced in IE 9. However, I'm not sure how to configure the shown code in the pages I'm working on. What do I substitute in place of 'your_external_file_without_big_image.html', and how can I use id="some_div" for additional inages?

Doesn't matter anymore, since you solved your problem (?).
Arie.

**KennyP** · 08-27-2012, 10:01 AM

Guys,

I don't know what's going on. When I first removed the following...

Code:

document.execCommand("BackgroundImageCache", false, true)

the problem began to go away. Instead, after not changing anything else, the flickering returned again as it was before the removal, and worse...

Now the main background color as was improved by John in the CSS...

Code:

html, body {padding:0; margin:0; color:#ffffff; background-color: #000000 !important;}

is now again displaying white before page loads. This is really weird. Do you have any idea what is happening?

www.billyjoeconor.com

**molendijk** · 08-27-2012, 11:10 AM

On my sample page, I don't use the before and after pseudo-elements, just jQuery plus a hidden iframe to include external content.
It's difficult to tell you what to do, since you don't use a hidden iframe, but a server side include (PHP), and I don't know very much about PHP. (Someone out there?).
Maybe you could just do this:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function include_image()
{
$('html').append('<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:-1;"><img src="your_big_image.jpg" style="position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden" alt=""></div>')
}
</script>

<body onload="include_image()">

Of course, you should adapt the size and position of your image(s) to your needs.
Arie.

**KennyP** · 08-27-2012, 11:34 AM

Thanks for the input molendijk. I entered that code on the home page but unfortunately it only intensified the white flash, so I quickly removed it.

**molendijk** · 08-27-2012, 01:50 PM

That's maybe because you have left the images in the separate files? Remove them from there and let function include_image() do the job in each file.
Arie..

**KennyP** · 08-27-2012, 02:23 PM

Thanks molendijk -- I wish that were the case and I could simply remove them -- but I had removed them from the separate files.

**jscheuer1** · 08-27-2012, 05:19 PM

Hi folks I'm back in this thread again at least for a moment. I thought I'd give Arie a chance to work his magic. His approach might still work. It might be that you just didn't clear things out enough (caches, both server and client side) to see the true result. Or it could be that you did and his method could use more fine tuning. Or a bit of both perhaps. It's difficult for us to help you if we cannot see the results of our suggestions. To that end you might consider putting up one or more test areas where you duplicate the site or at least all of the relevant pages and support files as a sort of sandbox. As I say, since various things are being tried, you might need 2 or more of these test areas.

I have another idea, actually have had it for quite some time. The site is in quirks mode. If it were converted to standards mode and written to standards and really cleaned up, it might be easier to get things working well. The only reason I haven't mentioned it until now is the amount of work that would involve combined with the fact that there's no guarantee it will solve anything. It's also possible that it might solve most things but that you would lose your transitions or have to do something else in a somewhat more boring way to get it to work.

A note to Arie about PHP. All it does is present HTML, CSS, and/or javascript to the browser. It's not dynamic. If you look at the source code of the page, that's the source code that PHP has told the server to send to the browser, just like a regular page. It just adds another layer so that one page may be a template for many and/or stats/data can be compiled and/or used. In the rendering of the page it makes no difference. If the page's served source code isn't to your liking and/or invalid, you can edit the PHP code to make it the way you want/need. Just like you edit HTML.

**molendijk** · 08-27-2012, 07:33 PM

Thanks for the PHP-info, John. So I managed to put a couple of the problematic pages on my hard disk, where the flicker went on with IE9 and Google Chrome. But your suggestion about quirks mode vs standard mode got me thinking. I replaced

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

with

Code:

<!doctype html>
<html >
<head>

and the flicker was gone, both with IE9 and Google Chrome! Brilliant (for now, of course, because I don't know what will happen on the Internet).
Kenny, just do the same and let's see what happens.
Arie.

**KennyP** · 08-28-2012, 12:04 AM

Thanks so much Guys. I'm very grateful for your kindness.

After literally staying up all night trying to clear up the problem, still had to meet the day's chores. I will try the last suggestion as soon as I get back to my PC, and will report on it.

Again many thanks,

Kenny

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

Thread Tools

Search Thread

IE 9 is becoming a nightmare!

Bookmarks

Bookmarks

Posting Permissions