無職です。はたらいてます。 旧ブログ: 1 Entry per Day

Safariでinput要素にbackground:none;を指定しつつcolorで一定より薄い文字色を指定すると完全に文字が消える

雑なメモ

Safari 12で再現。PCもモバイルも。

再現のStackBlitz stackblitz.com

chrome 75 safari 12
chrome safari

あるUIフレームワークをつかっていて、inputのdisabled時のcolorを指定していたら発生してびっくりした。 UIフレームワークのdisabled時のスタイル指定がなかったので、仮に color: #ccc; を当てていたら偶然踏み抜いた不具合のようななにか。 UIフレームワークのバージョンアップで既にこのcolor指定は不要になっていたので記述をcssから取り除いて事なきを得た。

どうもinput要素にbackground:none;を指定している状態でcolorを設定したときは発色が普通より薄く表示されているような感じ。

対処案

  • 問題が発生するcss記述を削除する
  • color 指定をもっと濃い色にする
  • Appleに泣きつく