nJOY BLOG

2009Jun17

IE8 「テキストエリアで勝手にスクロールするバグ」の回避方法

BlognPlus 公式コミュニティで「投稿エリア（テキストエリア）でスクロールバーが上下します」というトピックがあったのでちょっと調べてみました。

このバグがどういうものかは言葉で説明するよりも実際に試してもらう方が早いと思うので、検証ページを用意しました。

→ 「テキストエリアで勝手にスクロールするバグ」検証ページ

Internet Explorer 8 で文字を入力すると勝手にスクロールする現象を体験する事ができます。

日本語で検索すると同様の症状が「adiary 開発日誌: IE8のメモ＋バグメモ」で報告されていますが、他には特に見当たりませんでした。

でも検索言語を英語まで広げると、該当する情報を2件見つける事ができました。

• Microsoft Connect: textarea scroll moves when editing
• Microsoft Community: IE8 - textarea scrolling when specifying a width style

バグの発生条件

上記の2ページから得た情報をまとめると以下の通りです。

• Internet Explorer 8 の IE8 Standards モードで閲覧する。
• テキストエリア (textarea) の横幅 (width) を % で指定する。
• テキストエリアの横幅よりも長い文章を入力し、文章がテキストエリア内で折り返されている。
• テキストエリアの縦スクロールバーが表示されている。

以上の条件を満たした上で、テキストエリアに何か文字を入力すると、入力位置を示すキャレットがテキストエリア内で上下します（この結果スクロールバーが移動する）。

2009.06.18 追記: BlognPlus の場合は投稿フォームの幅が % 指定なのが原因のようですが、似たような症状でもこれが原因ではないケースもあるようです…。

バグの回避方法

この IE8 のバグを回避する方法は次の5つ。
1と2番はページの内容を編集できる開発者向け、3~5番はそれができないユーザー向けの解決法です。

1) textarea の横幅 (width) を % 指定にしない

textarea などのブロックレベル要素は、その横幅を実数値（px）やウィンドウ幅に対する割合（%）で指定できます。% で指定すると閲覧者の環境次第で横幅が可変になるので便利なのですが、IE8 ではそれが落とし穴になります。

不具合を回避するためには textarea の横幅は px で指定しましょう。

例) width: 95%; → width: 600px;

他のブラウザーでは可変幅のままにしたい場合は、条件付コメントで IE8 専用に別のスタイルシートを適用させたり、

<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css" type="text/css">
<![endif]—>

CSS ハックを使って IE8 用に width 属性を px 値で宣言しておくと良いと思います。

textarea { width: 95%; }
head~/* */body textarea { width: 600px; }

2) IE8 を互換表示モードにする（META タグ）

テキストエリアのあるページの head 内に下記のような記述を追加すると、Internet Explorer 8 が IE7 標準モードでレンダリングされ、バグを防ぐ事ができます。

<meta http-equiv="X-UA-Compatible" content="IE=7">

3) IE8 を互換表示モードにする（互換表示ボタン）

IE8 の「アドレスバー」の右側に表示される「互換表示」ボタンを押すと、そのページは IE7 標準モードで表示され、おかしな動作はしなくなります。

4) スタイルシートを無効にする

ページのレイアウトが崩れてしまう可能性があるのでおすすめしませんが、スタイルシートを無効にすればこのバグを回避する事ができます。

5) IE8 を使わない

このバグはIE8 限定のバグなので、それ以外のブラウザーを使うという消極的な方法もあります。他のブラウザー候補としては「Firefox」「Safari」「Opera」「Google Chrome」などがあります。

また BlognPlus はブログエディタ「Windows Live Writer」にも対応しているので、ブラウザーを使わなくても記事投稿できます。