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:

Xiaomi officially gave a reply and the problem can be located:

Hello, this is the active advertising filtering function of MIUI browser. Our original intention of doing this is to detect and block floating ads inserted in web pages. The specific judgment is based on whether there is an intersection between the fixed element and the host of the resource directly referenced in the main document. The page you provided looks like it should trigger this feature (the fixed element contains only c-ctrip.com).

This feature has been online for a long time and has always been considered to be less risky, and we have a configurable cloud whitelist mechanism. So, are you encountering this issue only in development? If so, you can turn off ad blocking in your browser settings. If you also encounter problems with the online version, as an emergency measure, we can add your website to the function whitelist and are willing to listen to the developers' opinions and modify or even remove this function as appropriate.

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

The temporary solution is this, Mao Zhao, I haven’t thought of a good solution yet, here’s a rough idea:

During initialization, keep the header element in relative or absolute positioning
Then after dom-ready, add fixed positioning to the header through setTimeout, triggering a redraw of the page, so that the element can maintain normal display

Answer 2

Thank you for the invitation. As soon as I pasted it into the editor, I got an error: