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

norfish
  • 407

在小米手机自带的浏览器中(版本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;}


<div 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>
</div>
回复
阅读 3.5k
2 个回答
✓ 已被采纳

update:

小米官方给了回复,问题可以定位了:

您好,这是 MIUI 浏览器的主动过滤广告功能。我们做这个的初衷是检测并屏蔽网页中插入的浮动广告,具体判断依据是看 fixed 元素与主文档中直接引用的资源的 host 是否有交集。您提供的这个页面看起来应该会触发这个功能(fixed 元素里仅包含 c-ctrip.com)。

这个功能已经上线较长时间,一直认为风险较小,并且我们有可配置的云端白名单机制。所以,您是否仅在开发中遇到了此问题?如果是,可以在浏览器设置中关闭广告过滤功能。如果您的线上版本也遇到了问题,作为一个紧急措施,我们可以将您的网站加入功能白名单里,并且愿意听取开发者的意见,视情况修改甚至去掉这个功能。

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

暂时的解决方案是这样的,毛招,暂时还没想到好的解决办法,说下大概:

初始化的时候让header元素保持relative或者absolute定位
然后再dom-ready之后,通过setTimeout为header增加fixed定位,触发页面的一次重绘,这样可以让元素保持正常显示

谢邀。刚粘到编辑器里,就报了个错:

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏