2010-05-28 // Microsoft Internet Explorer 8: Fix the weird textarea scrolling bug
MSIE 8 brings some new, weird bugs. One of the most annoying one targets <textarea>s with a percentage value for the width CSS property (ironically in standards mode only, the problem disappears in IE7 compatibility view or quirks mode). When a textarea has got enough content to offer scrollbars and the user already scrolled a little bit, every keystroke will because a disturbing auto-scroll effect (even with flickering scrollbars under certain conditions like onkeyup/down events or border CSS property values). This is a real show-stopper which makes editing longer texts very uncomfortable for IE8 users.
The following file shows the problem. Simply download and open it with IE8.1)
- msie8-textarea-bug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>MSIE8 textarea scroll bug/fail demo</title> </head> <script type="text/javascript">/*<![CDATA[*/ function checkMode() { var standard = false; if (document.compatMode) { if (document.compatMode === "BackCompat") { m = "Quirks"; } else if (document.compatMode === "CSS1Compat") { m = "Standards Compliance"; standard = true; } else { m = "Almost Standards Compliance"; } if (standard === false) { alert("ATTENTION: The document is being rendered in "+m+" Mode - there will be NO bug!"); } //alert("The document is being rendered in "+m+" Mode."); } } checkMode(); /*]]>*/</script> <style type="text/css"> textarea { height: 180px; width: 50%; /* this will trigger the bug */ } </style> <body> <form name="foobar" method="post" action=""> <textarea> Please scroll down a little bit and try to edit text. E.g. change the line by clicking into the text, type "asdf", go to another line, type "asdf" and so on. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </textarea> </body> </html>
I don't know how to get rid of the flickering scroll bars,2) but there is a workaround for the automatic scroll effect:
- The bug is triggered by a percentage value of the CSS
widthproperty. - To get rid of it, you need to define a fixed px width.
- If you do not want to loose the possibility to use flexible widths for
<textarea>, you can get the needed percentage value through the back-door by usingmin-widthandmax-widthwith the same value afterwards. You may use browser specific hacks to hide/overwrite the fixed width from IE6 which is not affected by this bug but does not understandmin/max-width.
Example:
textarea { /* width for non-IE browsers */ width: 50%; /* width for IE NOTE: - "\9" at the end is a CSS hack to address only IE (all versions). - "#" in front is a CSS hack to address IE6/7 */ width: 500px\9; /* fix the bug */ /* get the needed percentage value in IE7 and IE8 */ min-width: 50%\9; max-width: 50%\9; /* get the needed percentage value in IE6 */ #width: 50%; }
Hope that helps. 
Leave a comment…
- E-Mail address will not be published.
- Formatting:
//italic// __underlined__
**bold**''preformatted'' - Links:
[[http://example.com]]
[[http://example.com|Link Text]] - Quotation:
> This is a quote. Don't forget the space in front of the text: "> "
- Code:
<code>This is unspecific source code</code>
<code [lang]>This is specifc [lang] code</code>
<code php><?php echo 'example'; ?></code>
Available: html, css, javascript, bash, cpp, … - Lists:
Indent your text by two spaces and use a * for
each unordered list item or a - for ordered ones.
