flickering stuff in IE

So, a common problem with IE is the nasty, ever evil, Flash of Unstyled Content. Usually seen when trying to implement a CSS-based menu (usually dropdowns), IE will display the ordered list for a brief moment while it tries to load the rest of the page, then the styling for the list will appear and all will be well.

Everything functions properly, but it’s just damn annoying to see.

IE will also have a similar problem with loading up image - especially background images: you’ll have your page, and when you click from one link to the next, the background image is gone for a moment while the content appears. Then the background “pops in” - like a flash.

Again, functioning fine, just annoying as hell.

How to fix?

Well, when it comes to the FOUC, I’ve had several options work for me. I’m going to try to list all of them here, in one spot.

1. If you have a script that you’re using for your site - for example, Son of Suckerfish dropdowns need a script to make Internet Explorer recognize that :hover pseudoclass on an element other than an anchor tag - make the script external and be sure to place a link to the script in the header of your document. For some reason, this’ll get rid of the FOUC. Why? I dunno. It works, though.
2. Alternatively, another contibutor to the FOUC is the @import rule for your stylesheets. Why? Dunno. The fix? Change your @import rule to a <link rel="stylesheet"> - this can also help clear up the problem.
3. A neat little solution for the image flash that I found:

   <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

   Put that in the head of your document. Apparently, Internet Explorer has some kind of “fade in/fade out” option for pages that slows down the deletion of the cache (something IE loves to do, and the above tag prevents the flickering image effect from happening by exploiting this feature.

Keep in mind, with images, it always helps to have the smallest filesize possible to help avoid the “flashing image” issue. The smaller the filesize, the faster it loads!

Alternatively, another hint I’ve found that might be contributing to the weirdness is the use of “background-position:”. For some reason, if you use “background-position:x x;” IE will also enable the flicker. This is most notable in the CSS Image Swap Tutorial on this site. If you use the “background-position:” in your stylesheet, you’re gonna get some weird flickering going on.

Another reason? Your Internet Explorer settings are made to refresh background images on every visit to page. You can change this easily by going to “Tools > Internet Options > ‘General’ Tab > Temporary Internet Files” and clicking on the “Settings” button. Change the setting under “Check for newer versions of stored pages” from “Every visit to page” to…well, something else.

Of course, this won’t solve the problem for people visiting your page, as you can’t change their browser settings. But at least it’ll stop annoying YOU, eh?

And the final IE issue that seems to be common:

You have an unordered list, within a floated container. The list items themselves (or anchor tags) are also floated. You have a nice, pretty background to replace the bullets in the list - and they show up great…except in IE. For some reason, they disappear in IE. The simplest fix? Add, to your <li> tags, “position:relative;”.

BAM. Problem solved.

Posted by
April 4th, 2006