inputのplaceholderでiPhone5Safariの縦横がバグる件

918views／投稿 2013-07-25／更新 2019-04-30

inputタグやtextareaタグでplaceholderを使うとその文字列がグレーで例文として薄く表示することができますね。フォームの例文を最初に記述できるのでユーザーは自分が入力する内容を容易に想像できるようになるのでとても重宝する機能です。

<input placeholder="プレースホルダ（薄く出す例の文字列）">

このplaceholderですが、iPhone5のSafariで使うとちょっとしたバグがあります。XHTMLだからなのかも知れませんが、縦では問題ありませんが横にして、また縦に戻すと横幅がちょっとズレて、また横にするとめちゃくちゃデカく表示されるようになります。

そんなに普通のユーザーが縦横に交互させることはないでしょうが、気になる所なので対処したいところです。結果問題解決方法は、placeholder機能を使わないということにする事と、placeholderを活用する事をiPhoneのSafariでのバグと天秤に掛けるところに落ち着くかと思います。

viewportやCSS3のデバイス幅の問題ではなく、単にplaceholderがあるとそうなります。AndroidではGalaxyでチェックしましたが問題ありませんでした。この縦横の徐々にバグっていく傾向がある場合の原因はplaceholderにあることが判明したのでお伝えしました。