javascript - 小米浏览器中，图片导致fixed定位的元素无法显示

Question

在小米手机自带的浏览器中（版本V8.6.5）, 我的布局代码是这样的, header 是fixed定位，content容器里面包含有图片。但是当有图片的时候，fixed定位的header就无法正常显示。

注意：如果复现不了，请在文档底部执行一段js代码，可保证必现

已经试了以下方法：

1. 图片用背景图的方式，也会导致fixed元素无法显示

2. 调高header的z-index没有效果

3. 把图片挪到.page 容器之外，则能正常显示，但是这样会影响我的布局，不可用

有人遇到类似的问题吗？什么原因？怎么解决的

.page {position: relative; height: 100%; width: 100%; padding-top: 44px;}
.header-fixed {position:fixed; background: #ccc; width: 100%; height: 44px; top: 0;}
.content img{width: 100px;}


<p class="page">
    <header class="header-fixed">header</header>
    <section class="content">
        <img src="https://dimg04.c-ctrip.com/images/30080f0000007b78e6D63_C_500_280.jpg">
    </section>
</p>

Answer 1

update:

小米官方給了回應,問題可以定位了：

您好，這是 MIUI 瀏覽器的主動過濾廣告功能。我們做這個的初衷是偵測並封鎖網頁中插入的浮動廣告，具體判斷依據是看 fixed 元素與主文件中直接引用的資源的 host 是否有交集。您提供的這個頁面看起來應該會觸發這個功能（fixed 元素裡僅包含 c-ctrip.com）。

這個功能已經上線較長時間，一直認為風險較小，並且我們有可設定的雲端白名單機制。所以，您是否僅在開發中遇到了此問題？如果是，可以在瀏覽器設定中關閉廣告過濾功能。如果您的線上版本也遇到了問題，作為一個緊急措施，我們可以將您的網站加入功能白名單裡，並且願意聽取開發者的意見，視情況修改甚至去掉這個功能。

================================

暫時的解決方案是這樣的，毛招，暫時還沒想到好的解決辦法，說下大概：

初始化的時候讓header元素保持relative或absolute定位
然後再dom-ready之後，透過setTimeout為header增加fixed定位，觸發頁面的一次重繪，這樣可以讓元素保持正常顯示

Answer 2

謝邀。剛黏到編輯器裡，就報了個錯：