twitter.comで発生している、長いツイートを入力すると、入力した文字が見えなくなってしまう、という問題ですが、最近、よく苦情を目にするようになっているので、ここに解説記事を書いておきます。Army of Awesomeでこの問題を見かけた方は、その、困ってるユーザに、この記事を教えてあげてください。

とりあえず、今、この問題を回避するにはどうすれば良いのか、という質問に答えるには非常に難しいものがあります。

最も簡単なのは、Firefoxのバグを利用することです。今回の一件で、入力欄の最後の行にキャレット(テキスト入力中に点滅しているインジケータ)がある時に、下矢印キーを押すと、一番下までスクロールすることが分かりました。これはバグなのですが、現在、ユーザが利用できる一番簡単なスクロール方法です。ですが、自由なスクロールはできませんので、最低限の回避策、というレベルのものです。

最も自然な解決策は、ユーザスタイルシートを記述することです。しかし、この解決策を行うには、ユーザが、ユーザスタイルシートを記述する知識を必要としますので、残念ながら、簡単ではありません。ユーザスタイルシートについて知識が無い方は、上記のバグを利用した操作で利用するしかありません。ユーザスタイルシートで解決したい方は、以下の原因に関する説明もあわせて読んでください。

何が、問題なのかを理解するには、CSSのoverflow: hidden;についての知識が必要になります。twitter.comのツイートの入力欄には、このスタイルが指定されており、CSS仕様では、ブラウザはユーザにスクロールするUIを提供してはいけないと定められています。このため、入力内容がはみ出してもユーザの操作を基に、スクロールしてはいけません。Javascriptからのスクロール位置の指定でのみスクロールできるのが正しいのです。これは、Webデザイナへ提供されたひとつのデザイン手法なのです。つまり、一言で言うなら、twitter.comのサイト側の設計に問題があります。

では、なぜ、今までは問題が無かったのか、というと、twitter.comでは、入力内容が入力欄からはみ出す場合に、入力欄のサイズを大きくし、全ての内容がスクロール無しで表示できるようになっていました。ですが、twitter.comはサイズ変更を行わないように変更され、入力内容がはみ出してしまうケースが出てきました。

では、なぜ、他のブラウザでは問題が無いのか、というと、他のブラウザでは、入力欄にoverflow: hidden;が指定されていても、キャレットが常に表示されるように、スクロールするためです。調査したところ、Internet Explorer、Safari、Google Chrome、Operaのいずれにおいても、キャレットの移動によるスクロールが可能でした。これでは、Webサイトの動作をFirefoxではテストされていない場合に、Firefoxのユーザに今回のような深刻な影響を与えてしまいます。このため、Firefox 18では、他のブラウザと同様に、内容が編集可能な場合にのみ、キャレットが常に表示されるようにスクロールするよう、修正されました。ですが、Firefox 16はもちろん、Firefox 17でも修正されないことが決定しました。これは、修正による副作用のリスクを考慮しての決断です。

現在、Mozillaでは、ツイッター社にサイト側でなんらかの対応がとれないか、コンタクトを試みています。ツイッター社がこの問題に、サイト側で対応してくれれば、一番良い解決策を、Firefox 18までに提供することができるでしょう。