選択状態の青背景がなくなって空白っぽく見えてしまう

Question

前提・実現したいこと

複数選択できるselectを配置。
選択してる状態でスクロールして、選択したところに戻ると
選択状態の青背景がなくなって空白っぽく見えてしまう。

ちゃんとなかみが見えるようにしたい。

発生している問題・エラーメッセージ

↓選択して、下へスクロール

↓戻ったときに選択したはずの「1」が見えなくなる

↓フォーカス(青枠)がなくなると、見えるようになる

該当のソースコード

<div class="input-group">
　<div class="input-group-prepend">
　　<label class="input-group-text" for="list1">タイトル</label>
　</div>
　<select class="custom-select" id="list1" name="list1" size="5" multiple>
　　<option value="1">1</option>
　　<option value="2">2</option>
　　<option value="3">3</option>
　　<option value="4">4</option>
　　<option value="5">5</option>
　　<option value="6">6</option>
　　<option value="7">7</option>
　　<option value="8">8</option>
　</select>
</div>

試したこと

select:focus option:checked {
 color: #000;
}

補足情報

Bootstrap v4.1.0
jQuery JavaScript Library v1.10.2
jQuery UI - v1.10.4

Comments

[退会済みユーザー]

確認した時の環境等も記載していただけませんか？

[panda]

Google Chromeで確認した時になりました。バージョン: 70.0.3538.77

Answer 1

再現する最低限のコードは以下のようです。

.custom-select2 {
  position: relative;
  /* -webkit-appearanceがなくても再現するが、マウスダウンが外れると表示されるようになる */
  -webkit-appearance: none;
}

.custom-select2:focus {
  z-index: 3;
}

Bootstrap のドキュメントを見る限り、.custom-select で multiple は使われていないようで、想定されていないのではないでしょうか。
したがって、次のスタイルを適用することで問題を回避できそうです。

.input-group > .custom-select[multiple]:focus {
  z-index: auto;
}

https://getbootstrap.com/docs/4.1/components/forms/#select-menu

Answer 2

動くサンプル：https://jsfiddle.net/ysoq81tm/2/

Chrome にて状況が再現しました。
解決につながる回答ではないのですが、.input-group の display: flex; を外すと消えなくなるのですが、.input-group と同じスタイルを指定した場合問題が起こらないため、かなり稀なバグではないかと推測します。