IE6 Hover Crash Demo

CAUTION: THIS DEMO MAY CRASH INTERNET EXPLORER 6! I take no responsibility for any problems caused as a result of viewing this demo. Use it at your own risk. It is highly likely to crash IE6, as well as slow down the computer heavily. You will need to manually 'kill' the program once it has crashed, by pressing CTRL + ALT + DEL, or right-clicking on the IE taskbar button and choosing 'Close', followed by 'End Now'. This may take a while.

Test Header

What to do and observe here

  1. Carefully hover over the first line. You should see Line 2 disappearing, along with the start of Line 3! You may also see squares added to the end of the line. The text also takes on some of the style of the header below it!
  2. Hover over Line 3 (if you can without it crashing) and it flickers a lot between states.
  3. Now hover over either the 2nd line of text in the first list, or the larger of the images in the second list. IE freezes!
  4. The image is an identical list added to show how the hover effect sometimes works. See the Workaround details further on.

Notes

  1. Tested with IE6 on Windows XP SP2.
  2. The thumbnail and the large image are the same file, so we can rule out delays in loading a larger image.
  3. When crashed, I noted IE6 used 100% CPU, then started to increment the Page File. On my system, I saw this climb to 1.12Gb! The RAM was also down from around 390,000K to hovering between 2,000-4,000K.
  4. Also in the Task Manager (seen when pressing CTRL + ALT + DEL in XP) I'm seeing two Internet Explorer processes running. They both say "Not Responding" but have different versions of the IE logo. Sometimes it's incredibly difficult to close them down. I'm not sure what's going on.
  5. Adding a background colour to all links causes Line 1 to crash the browser on hover too.
  6. Adding a border around links stops Line 3 changing to the header styles.
  7. If you change the links to proper URLs, they appear correctly, until clicked on.
  8. The dotted border around the lists is so you can safely move to the edge of the page without crashing the demo. I also made them 50% wide.

Workaround

To avoid this crash add a :visited state to the hover code, like this:

:link .images, :visited .images {
width:300px;
display:none;
}

Do the same for both lines that style the links. Note that you need to click on the link to get the hover effect to work! (So lines 2 and 3 appear.) In other browsers, just hovering over the link is enough. However, it seems to be very temperamental. To be honest, it doesn't always work.

When using an image it tends to work more often. But again, not always. I found if you click once, then go back by removing the hash from the URL, it sometimes works! Also, if you click on the image first and it works, then the text hover will work after that.

Created by Chris Hester 28 February 2006 · Last updated: 2 August 2006 · Comments