確か去年の夏頃から、Google Chromeでフォームに入力してる時に、日本語変換中のテキストが消えてしまう現象が起こるようになった。
↓みたいな感じに。

日本語変換中にテキストが消える

おい、どこ行った。ってなる。

原因はCSSの「::selection」だった

テキスト選択時の様子

よくCSSの「::selection」でテキスト選択時の文字色や背景色を以下のように変更するんだけど、

::selection {
  color: #fff;
  background: #000;
}

なぜかGoogle Chromeでは、この時の文字色(#fff)が日本語変換中に適用されてしまう、ってことだった。
だから、文字が消えてるんじゃなくって、フォームの背景色と文字色のどちらもが白だから見えなかっただけなんだな。

解決策

下記のようにすれば良い。

::selection {
  color: #fff;
  background: #000;
}

input::selection,
textarea::selection {
  color: #000;
}
変換中に文字が消えなくなった

これでテキスト選択時の文字色は白、フォーム内の文字色は黒、と出来た。