Treehouse

Preventing The IE6 CSS Background Flicker

By on  

One of the nagging issues that Internet Explorer creates is a flicker on anchor tag background images. Did you know, however, that there is a quick and easy way to prevent that problem using a little bit of JavaScript? Simply place the following JavaScript code in the header section of your website, refresh the page, and bid adieu to another IE6 issue.

ydkjs-3.png

Recent Features

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

Discussion

  1. Steve

    You can do the same thing by using .htaccess to cache the file. I don’t know if there is a minimum cache offset but a day works. And if you are following the yslow guidelines you get this as an added benefit. The flicker is actually caused by IE revalidating the image. The advantage to this method beyond speeding up your site is it doesn’t require JavaScript to work.

  2. Awesome man! Thanks for sharing this.

  3. Thanks, this worked great! A simple solution to an annoying behavior.

  4. P

    Hi,

    Where can I get the Javascript code to resolve the issue?

    regards,

    N

  5. valentina

    great! and thank you!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!