iOS6のinputタグにバグ – 幅のパーセントとplaceholderには要注意

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

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

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

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

<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をつけていたほうが無難だと思います。

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

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