::placeholderに入れたアイコンがSafariのみ上下中央揃えにならない問題

テキストボックスのplaceholderに入れたアイコンがSafariのみ上下中央揃えにならない

原因探しした。
結論から言うと、::placeholder
にはそれ用のベンダープレフィックスを付けましょう、ということかな...。
input::placeholder {
font-family: "Material Symbols Outlined";
position: absolute;
top: 52%;
transform: translateY(-50%);
color: #7fb1e5;
}
今回のコードはこんな感じで、::placeholder
に対してオーソドックスな上下中央揃えをやっている。(むしろもう古いかも?)
この行に続く部分の、scssからコンパイルされたcssを見ると、-moz-
付きの::placeholder
はあったけど-webkit-
が付きは無かった。
Safariで見られなかったのはこれが原因の可能性がある。
/* あった */
input::-moz-placeholder {
}
/* なかった */
input::-webkit-input-placeholder {
}
Can I use...見ると-webkit-なしでもSafari対応済みなようだけど、実際は崩れてしまうことがあるのはSafariあるあるですな、、、
ちなみに、 なぜ解決まで原因の追究をしていないのかというと、既にコードが自分の手から離れた後で、Safariでの検証ができる権限が無いからです。
...やっぱ検証用に中古のiPhoneかMacか買うかなあ...

ベンダープレフィックスについて引っかかりそうなところメモ
上の件は一旦置いておいて、今回のような疑似要素にベンダープレフィックスが付く場合の記述について引っかかりそうなことがあったのでメモを残しておく。
次のコードのNG例のように、記述をまとめてしまうとエラーが出るのでブロックごとに分けて書く必要がある。
/* NG */
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
}
/* OK */
input::-moz-placeholder {
}
input:-ms-input-placeholder {
}
input::-webkit-input-placeholder {
}
セレクタの1つでもエラーとなると、宣言全体が無効になります。
例えば、Chrome ではベンダープレフィックス -ms- を認識できないので、エラーとなり宣言全体が無効となります。逆も同様で、IE ではベンダープレフィックス -webkit- を認識できないので、エラーとなり宣言全体が無効となります。
これは仕様にも記載されています。
> the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
https://www.w3.org/TR/CSS2/syndata.html#rule-sets
めちゃくちゃわかりやすい説明、引用させていただきました。
https://sample27.simplesimples.com/web/markup/css/inputplaceholder/ コメント欄、@arktdsさま
ベンダープレフィックスもSCSSのコンパイル頼みになっているところがあるので、今回のような件で手打ち付け足しする必要があったりするとハマりそう。あまりない機会だものね。