大家午安,

"html 元素樣式 background image偶爾未顯示(圖片資源可讀)"

如標題情境,測試了一段時間,目前仍然沒有什麼頭緒,所以想請教各位是否有遇過類似問題,是否能提供我一些方向QQ。

目前我只有在mobile裝置上的chrome遇到(版本84.0.4147.89)。

有發生類似情形的元素有:

1. 單選元素 input type="radio"
   採用的css屬性設定
   input[type=radio ]:not(old) + label{
   background: url(../../Images/selected.png) round;}

   input[type=radio ]:not(old):checked + label{
   background: url(../../Images/unselected.png) round;}

2. div class="myclass"
   採用的css屬性設定
   background: url(../../Images/btn_blue.png) round;

排錯上,透過chrome remote debugging,確認過的狀態有:

1. 圖源無誤可開啟
2. 樣式設在獨立的css檔案
3. 渲染的css檔案有載下來,並有渲染
4. URL屬性使用位置為相對位置,background image偶爾未顯示出來
5. 在chrome偵錯介面中network清單中,若在背景圖未成功顯示的情況下,清單上看不到有request紀錄(理論上應該要有)。
6. 另外,在network清單中成功的情況下,有載入兩次name相同的檔案?如下圖
   
   一個type是text/css另一個是styleSheet,
   以我目前的理解,styleSheet是css檔案本身。不確定與這問題有沒有什麼關聯性。
   如果顯示失敗,則清單上只有顯示載入styleSheet。

-----後續更新-----

目前測試如果在dev tool觸發css重載,狀況就解決了。因此,暫時先用JS強制重載CSS,然後再觀察看看。