Androidの一部端末でTextAreaにline-heightを指定すると選択位置がずれる

一部端末というより今の状態だと現象が起こる端末の方が多そう。現象を詳細に書くと「テキストエリアに長文を入力して、入力した文章の途中を変更しようと変更箇所をタップしてもタップした位置が選択されない」というもの。

なぜそうなるのか?

一部端末のAndroidの標準ブラウザではtextarea:focusに対するline-heightが効かないが、textareaに対してはline-heightが効くので、フォーカス時と非フォーカス時で見た目の高さが変わってしまう。変更したい箇所をタップしてカーソルを移動した場合、非フォーカス時のline-heightで位置が計算されるようで、表示はフォーカス時のもの、選択した位置は非フォーカス時のものとなってしまいカーソルがずれてしまうというのが本現象を引き起こしている模様。

対処法

今のところ対処法は無い。textarea:focusでもCSSが効く端末と効かない端末を判別出来れば色々できるだろうけど、端末名をUserAgentから引っ張りだしてやるにはケアレスミスが多すぎるのでtextareaにCSSを指定しない or CSS効かなくても問題がないデザインにするしか無いと思う。

まとめ

AndroidのChromeは大丈夫なのに標準ブラウザは解釈できないってなんだよー。iPhoneはできるみたいだからもうちょっと頑張って欲しい。