Menu
IE8 has a known bug (per connect.microsoft.com) where typing or pasting text into a TEXTAREA element will cause the textarea to scroll by itself. This is hugely annoying and shows up in many community sites, including Wikipedia. The repro is this:
Expected: nothing happens Actual: scrolling happens on its own, and the insertion point ends up near the bottom of the textarea!
Below is repro HTML (can also see this live on the web here: http://en.wikipedia.org/w/index.php?title=Text_box&action=edit)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><body>
<div style="width: 80%">
<textarea rows="20" cols="80" style="width:100%;" ></textarea>
</div>
</body></html>
I know I can avoid this by forcing the website into IE7 compatibility mode, but what's the best other way to work around this bug while causing as few side-effects as possible?
278
I ended up wasting a lot of time trying to figure out the answer myself, so I figured I'd save others the trouble of answering. The trick is to use a very large value for the COLS attribute on the TEXTAREA element. Like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<div style="width: 80%">
<textarea rows="20" cols="5000" style="width:100%;" ></textarea>
</div>
</body>
</html>
I also saw a workaround online to use a non-percentage width and then a percentage max-width and min-width, but that was much less impactful than the other workaround above (courtesy of Ross) which seems to work on all browsers including IE6.
more details: After an hour investigating this, the problem seems to be caused by IE8's handling of a conflict between "COLS" attribute and "width" style on a textarea element. If the width CSS is wider than the default width (font width x cols), IE8 gets confused when you add text and scrolls the textarea. If, instead, the width CSS is smaller than the default width derived from the cols attribute, then all works OK.
The subtle dependence between cols and width is perhaps what makes the problem so tricky to repro, because the same exact page would break or not break depending on the ratio of cols to width. The HTML in the quesiton actually reproes the bug on a large browser window and doesn't repro on a small one!
178
I think the best way to describe this bug is that if you set a width for the textarea using CSS, and this width is too different from what the COLS field would render, IE8 shows the weird problem, with the skipping scroll bar.
So, if you have cols="10" and textarea { width: 600px; }, the problem will show up because IE8 will use the width calculated by the COLS attribute for the scrolling, instead of the CSS one that's overriding the dimensions.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
