HOME > 話題 > ネット関連 > IE8 「テキストエリアで勝手にスクロールするバグ」の回避方法

RSS 購読

nJOY BLOG

ゲーム攻略サイト「nJOY(エンジョイ)」管理人のブログ

2009Jun17

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


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

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

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

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

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

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

バグの発生条件

上記の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 標準モードで表示され、おかしな動作はしなくなります。

IE8 互換表示ボタン

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

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

5) IE8 を使わない

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

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

関連記事

コメント

某フリー百科事典編集していて、非常に困っていました。これで助かります!!

| メント | URL | 2010/03/29 09:21 PM | x9jJ4YDw |

この記事の情報がお役に立ててよかったです。
MS はこんな重大な不具合をいつまでもほっとかないで欲しいですよね。

| CJ | URL | 2010/04/01 08:52 PM | pAWXWe0c |

この問題に直面したので対策をしたのですが、対策後にこの問題について検索したところ有名な不具合だったようですね。

私が思いついた対策は、
* IE8のモードスイッチ
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
* textarea に対する overflow(-y) プロパティ指定
* textarea に対する position プロパティ指定
* textarea に対する display プロパティ指定
でした。

親ボックスに対して幅いっぱいのテキストエリアを表示させるためパーセント指定のままで、かつCSSのみの編集で対応する必要があったのですが、試したところ textarea { display: block } で不具合が起こらなくなったようなのでこちらを採用してみました。

どの方法にどのような副作用があるかを正確に検証できていませんが、モードスイッチを使わない対応方法として有効であればと思いコメントさせていただきます。

| arc | URL | 2010/05/13 07:58 PM | 54es4glk |

情報どうもありがとうございます。
textarea { display: block } を入れて見たところ、不具合が起きない事を確認できました。
Firefox/Opera/Safari でも特に副作用はありませんでした。

この記事であげたバグの回避方法は自分で書いていてもあまりスマートではないやり方だと思っていました。
arc さんの方法が今のところベストですね。

| CJ | URL | 2010/05/15 12:03 AM | pAWXWe0c |

バグに関してパターン分けして紹介くださりありがとうございます。バグの発生条件なども整理してあり、とても参考になりました。

回避手順ご案内するのでカンタンな手順書をまとめて、その中のリンク集でこの記事を紹介いたしました。よろしくお願いします。(次のサイトです)

「テキストエリアで勝手にスクロールする(揺れる)現象を回避する手順」(http://g004.intropress.net/

なお、当方では px 指定したテキストエリアでバグが発生していました。

| intropress | URL | 2010/10/15 11:59 AM | tQ9o8ZoI |

わざわざご連絡どうもありがとうございます。
このページの情報が少しでもお役にたったのなら、とても光栄です。

| CJ | URL | 2010/10/16 10:12 PM | JBEW/VXA |

栃木県在住のプログラマーです。
textareaの2行目以降が表示できない不具合で
こちらにたどりつきました。
幅をピクセル指定することで無事回避できました。
有用な情報をありがとうございました。

| ugpi | URL | 2011/08/12 11:40 PM | k6.qdKDI |

上方がお役にたてて良かったです。
IE8 を切り捨てられればそれが一番なのですが、そうもいかないですしね。

| CJ | URL | 2011/08/14 05:32 PM | zCiH8igE |

コメントする(半角1000文字まで)

Cookieに登録

この記事のトラックバックURL

※ 言及のないトラックバックは拒否される事があります(トラックバック・ポリシー

トラックバック

トラックバックはありません


最新記事

人気記事

月別アーカイブ

コメント

カテゴリー

リンク