iOS/Safariでplaceholderの文字が真ん中より上にずれる件について

現状

題名の通り、
iOS/Safariでplaceholderの文字が真ん中より上にずれてしまうバグがありました。

そこで、ネットで色々検索をし、
ここやここを参考にし、なんとか以下の実装でバグは解決しました。

input::-webkit-input-placeholder {
    padding-top: 0.2em;
}

質問したいこと

疑問は、
どうして、 webkit と指定をしているのにiOS/Safariのみのバグがなおり、
Chrome（Android）ではpadding-topが上にずれるなどのバグが発生しないのでしょうか？

webkitとはSafari・Chromeのことなので、
上記のソースだと、Chromeにも反映されるはずです。
ところが、Chromeではもともとバグは起きていないこともあり、
上記の実装をする前と後で何も変わりませんでした。

バグが直ったことは嬉しいのですが、
本当にバグをあのソースで直すべきかどうかが疑問でモヤモヤしていたため質問させていただきました。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答2件

すでに解決していますが、誤解を招く恐れがあると思ったので。
現在 Chrome は Blink という WebKit から分岐したレンダリングエンジンを使っていますが、ベンダープレフィックスは依然として webkit が使われています。
したがって、 ::-webkit-input-placeholder も Chrome で有効です。

padding-top が利かなかったのは使えるプロパティに制限があるためです。
https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

実際に以下の記述を Chrome で試してみると、適用されてずれてしまうようです。

CSS
1input::-webkit-input-placeholder {
2    position: relative;
3    top: 0.2em;
4}

投稿2019/05/23 04:21

x_x

総合スコア13749

miyabi_pudding

2019/05/23 04:25 編集

うお、誤解を招く回答してしまってました。質問者さん、申し訳ないです。 x_xさん、ありがとうございます。

mai0521

2019/05/23 10:22 編集

ご回答いただきありがとうございますm(_ _)m

mai0521

2019/05/23 10:25

利用可能なプロパティの中にpadding-topがないのは確認できました。ありがとうございます。 https://developer.mozilla.org/ja/docs/Web/CSS/::first-line 利用可能でないプロパティなのに、どうしてSafariだけ利用できてしまったのかが気になるのですが、ご存知でしょうかm(_ _)m

x_x

2019/05/24 01:52

仕様上は https://drafts.csswg.org/selectors-3/#first-formatted-line https://drafts.csswg.org/css-pseudo-4/#first-line-styling > User agents may apply other properties as well. としていて、実装によってここに挙げたもの以外も使えるということをほのめかしています。その差異が出たものと思われます。

行動規範の内容に同意します