In June 2009 I uncovered a bug in the way Internet Explorer 8 handles HTML textareas, and posted this info about it. Apparently I was one of the first people ever to document this bug (but not the first, see the Simple Machines link below), because the post resulted in a lot of people around the internet linking to me. So for posterity's sake, here it is, preserved from my now-defunct blog.

The bug is this: If you have a textarea with a width specified as a percentage (most commonly 100%), and there's enough text in the textarea to cause it to scroll, the textarea will scroll up by a few lines for each character you type, only stopping when the line you're editing reaches the bottom of the box (or the scrollbar reaches the uppermost position). Sometimes, when deleting text, it even scrolls up further than that, leaving your cursor somewhere outside the visible part of the textarea. Sounds fun, right?

Since the bug didn't exist before IE8, it can be repaired by activating Compatibility View, which sends the page through the old IE7 engine instead. If you're already doing the extra bit of work to accomodate IE7 users, this might not be a half-bad solution. But if you want to avoid regressing to an earlier version of IE and dealing with all the CSS hacks that implies, I recently found an alternate solution courtesy of the Simple Machines forum developers.

The bug is triggered when the CSS "width" property (and only that property) is set to a percentage. So how do you set width without setting "width"? By setting min-width and max-width to the same value! It looks a bit odd, but it's perfectly standards-compliant and should be interpreted correctly by all major browsers. Do it like this:

textarea {
  width: 700px;
  min-width: 100%;
  max-width: 100%;
}

Note that the explicit non-percentage "width" value is required to avoid triggering the bug; it gets overridden by the other two properties anyway.

If you need to support IE6 (which I strongly recommend not doing unless human lives are on the line), you must keep in mind that it doesn't understand min- and max-width, and will set the textarea to the fixed width you specify. If you're not okay with that, you’ll want to feed a "width: 100%" declaration to IE6, probably using an alternate stylesheet linked via conditional comments.

Note: Some commenters reported that this solution didn't work for them, but setting the textarea to have a fixed pixel "height" property did work. It was also reported that this bug may occur even with textareas that have a fixed pixel width, if they have a script function triggered on input.