iOSでtextareaの余白が大きくなる

input[type=text], input[type=password], textarea {
  〜
  padding: 15px;
  〜
}

上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは問題ないがiOSだけSafari、Chromeともにtextareaの余白が2pxほど大きくなる現象にぶつかった。

原因は不明で情報も特に見当たらなかったので下記のような大雑把な対応をしました。

@media screen and (max-width: 639px) {
  textarea {
    padding: 13px;
  }
}

スマホサイズと仮定している639px以下になった時、textareaのみ余白を小さくしています。

AndroidはiOSと違って正常に余白が出ており少しだけ左寄りになってましたが、解像度の都合さほど気にならなかったのでこのままで良しとしています。

ちゃんとやるならJSでUserAgentとディスプレイサイズを拾って、異なるCSSを読む分岐を作る必要がありますが、ごく小さい箇所だったのでこのような対応で済ませました。

ぶっちゃけiOSのバグです。