iPhoneでinputにwidthにパーセント指定とplaceholderを同時に使用すると横幅が画面サイズに調整されずにハミでてしまうバグのお話。調べてみると、どうやらiOS6特有で特定条件下におけるバグのようで…まぁやっかい。

通常のブラウザサイズ(例えば横320px)で閲覧している分には問題ないのですが、デバイスを横表示にして、再度縦表示に戻してみると右側に謎の余白が生まれる。というもの。

どうやら、親要素の幅が横向きの状態から戻っていない様子。
なんでだよ…。

inputを囲む親要素に対してoverflow:hiddenを付けてあげると、この現象が回避できるようです。

html

<div>
	<form>
		<input type="text" name="" value="" placeholder="テキストを入力">
	</form>
</div>
css


input {
	width: 100%;
	box-sizing: border-box;
}

div {
	overflow: hidden;
}

今回の条件をまとめると、

・iOS6(SafariやChromeは関係なし)
・inputのwidthをパーセント指定
・inputにplaceholderを使用

このようになります。

自分の端末がiOS6のままにしていたためこの条件に当てはまり、開発段階で発見できたバグでした。
パーセント指定で起こるバグなので、リキッドデザインで制作しているとこの現象とちょくちょく遭遇しそうな予感がします。

そのため、リキッドデザインでinputタグを使用する場合は、あらかじめ親要素に
overflow: hiddenをつけていたほうが無難だと思います。

特定の条件下でのみ発生するバグというのは、マークアップする側としては発見しにくく、対応したことにより、返って他のブラウザなどに影響が…。
なんてこともちょくちょくある事なので、特定条件下のバグはできるかぎり無くなってほしいところです。

対応方法を掲載していた参考サイト様にただただ感謝。

参考
HTML5 – iOS6でinputタグに幅100%とプレースフォルダを設定した時のバグ – Qiita
http://qiita.com/masahirock@github/items/58621961c1f81b017e8d

第62回 iPhone iOS6でinputタグの右側に余白が出来るバグ|コーディング代行ならコーディングファクトリー
http://coding-factory.com/cm/cm62.html

PAGE TOP