もずはっく日記(2012年10月)
2012年10月20日
Bug-org 795785 editor isn't scrolled to the caret position if editor specified overflow: hidden;
初回投稿日時: 2012年10月20日11時39分48秒
カテゴリ: CSS Firefox Google Chrome IE modest Mozilla Core Mozilla18 Opera Safari バグ修正
SNS:
Tweet (list)
twitter.comの、ツイートを書き込む<textarea>に、overflow: hidden;が指定されているため、CSS仕様を忠実に守っているFirefoxでのみ、キャレットを移動してもスクロールできず、入力した内容が確認できないことがある、というバグです。
modestに記事を書きましたが、CSS仕様では、overflow: hidden;の要素では、スクロールできるユーザインターフェースを提供してはならない、となっています。勘違いしてる人を時々見かけますが、ユーザインターフェースというのは、GUIのことだけではなく、操作全般を指します。キー入力や、マウスホイール、スワイプ等でもスクロールできてはいけません。
実際、他のブラウザでも、中身が編集可能ではない要素で、overflow: hidden;を指定していると、一切、スクロールできませんが、何故か、<textarea>の場合や、contenteditableな場合にはキャレットの移動によって、スクロール可能でした。
今回の修正で、エディタの内容が変更された場合と、キャレットが移動した場合に、編集可能な要素だと、スクロールが行えるように修正しています。編集不能な要素では引き続き、ユーザによるスクロールは不可能です。