autocomplete に対して :placeholder-shown がきかない

フローティングラベルサンプル for Bootstrap · Bootstrap

Rails 上でこれと同じフローティングラベルを動かしたいと思ってるんですが
ページを表示した瞬間以下のようにラベルにだけスタイルが当たりません

出力されているHTMLは以下で

<div class="form-label-group">
<input autocomplete="username" class="form-control" autofocus="autofocus" placeholder="メールアドレス" required="required" type="email" value="" name="user[email]" id="user_email">
<label for="user_email">メールアドレス</label>
</div>

原因を探るために
SCSS をデバッグ用に以下のように border や背景に色をつけるだけにしました

.form-label-group {
  & input {
    &:not(:placeholder-shown) {
      border: 1px solid #0f0;
      & ~ label {
        border: 1px solid #f00;
        background-color: #fee;
      }
    }
  }
}

画面を更新してオートコンプリート設定で値が表示される（=プレースホルダーが表示されてない）
状態で input のボーダーの色は変わったのですが
input ~ label で指定されるラベルの CSS が反映されず
画面のどこか１箇所（フォームとは関係ない場所）でもクリックすると反映されて色が変わります

また auto-complete ではなく value をセットすると最初から正常に色が変わります

JSはjquery と bootstrap を読み込んでいるだけでまだ何も仕込んでおらず
CSSやクラスを変更するようなギミックも HTML の構造を変化させるようなギミックも存在しません

なので input の CSS が反映されれば
input ~ label も反映しなければおかしいはずで
ブラウザの挙動がおかしいとしか思えないのですが原因がわかる方いらっしゃらないでしょうか

MAC OS 上の chrome 最新版(83.0.4103.116) です

デバッグCSSなしの状態(正常)

ページ再読み込み直後(異常)

ページ内のどこかをクリック後(正常)

仮に何かJSが悪さしてるとしても input => label は HTML 上では連続しているので
& ~ label で & 部分の CSS が反映されるのに ~ label だけが反映されない理由
また画面クリックするだけで反映される理由がわからないのです

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

回答1件

ベストアンサー

Firefoxでは問題なく動作していたので、主にChromeの問題かと思います。（Safariは未確認）
ご希望の通りではないでしょうけれど、こちらはいかがですか。

css
1.form-label-group input:-webkit-autofill {
2  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
3  padding-bottom: calc(var(--input-padding-y) / 3);
4}
5
6.form-label-group input:-webkit-autofill ~ label {
7  padding-top: calc(var(--input-padding-y) / 3);
8  padding-bottom: calc(var(--input-padding-y) / 3);
9  font-size: 12px;
10  color: #777;
11}