スマホでinputにwidth: 100％;とplaceholderを指定した時に、端末を横向きから縦向きに変更すると画面幅がおかしくなる

iOSの端末を横向きから縦向きに変更した時に、画面幅が横向きの時の幅から戻らなくなる不具合に遭遇したのでメモ。
確認したのはiOS6の端末です。

サンプルコード

inputにwidth: 100％;とplaceholderが指定されている場合に発生するようです。

HTML

<form action="">
	<div class="form__key">お名前</div>
	<div class="form__value">
		<input type="text" name="name" placeholder="山田 太郎" class="form__value-text" />
	</div>
</form>

CSS

.form__value-text {
	width: 100%;
	box-sizing: border-box;
}

対応前のデモページ
　

overflow: hidden;を指定することで対応できます。

CSS

.form__value {
	overflow: hidden;
}
.form__value-text {
	width: 100%;
	box-sizing: border-box;
}

対応後のデモページ
　

【参考サイト】

• iOS6でinputタグに幅100％とプレースフォルダを設定した時のバグ – Qiita