收藏
回答

微信公众号网页底部返回栏偶尔会遮挡网页有效部分?

- 当前 Bug 的表现(可附上截图)

iPhone6,6s,7手机下:点击公众号的入口进入首页,首页提供了一个点击登录的操作,点击登录跳转授权并重定向回首页。此时微信底部的返回栏出现,会出现遮挡首页的tababr(tabbar相对于body ,position:fixed)的BUG。经过多次测试,重复上面操作,偶尔不会出现遮挡。在进行横竖屏切换操作之后,页面布局显示正常,不会再被遮挡。打印浏览器可视高度,显示浏览器可视高度未正确减去底部返回栏的高度。

返回栏未出现时候,浏览器高度是603。在返回栏出现的时候,表现正常情况下,浏览器高度是554,底部tabbar被遮挡情况下高度还是603,浏览器高度不正确,所以导致首页tabbar被微信自带返回栏遮挡。




- 预期表现

底部tabbar不会被微信返回栏遮挡。

上图图一和图三为正常表现。图二为BUG,tabbar被微信自带返回栏遮挡,可以略微拖着tabbar边缘,拖上来。

- 复现路径

http://m.jf.xuebuapp.com/

- 提供一个最简复现 Demo


最后一次编辑于  05-21  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

6 个回答

  • ***Dan***
    ***Dan***
    08-07

    请问楼主问题解决了吗?

    08-07
    赞同
    回复
  • Gavan
    Gavan
    06-24

    遇到了同样的问题,请问这个问题怎么解决的?

    06-24
    赞同
    回复 3
    • C&H
      C&H
      06-24

      两种方案:

      1、在加载数据的位置加上setTimeout,等微信底部返回栏加载后再加载页面;

      2、隐藏微信底部返回栏,在跳转链接的位置使用window.location.replace()。

      06-24
      1
      回复
    • N
      N
      09-12回复C&H
      谢谢大佬,这个问题快把我弄疯了,参考您的方法,终于完美解决了!
      09-12
      回复
    • A吴澍
      A吴澍
      10-14回复N
      怎么解决啊
      10-14
      回复
  • C&H
    C&H
    06-17

    遇到了同样的问题,请问这个问题怎么解决的?

    06-17
    赞同
    回复
  • 祺爸💎
    祺爸💎
    05-21

    既然你这个网页必须在微信里打开,微信这个问题又不是你力所能及的,那就只能是你去适应微信了,比如把底部的功能移到其他地方,比如和iPhone X适配一样,底部留出安全区等。接受现实吧

    05-21
    赞同
    回复
  • 铭锋科技
    铭锋科技
    05-20

    自从公众号有下面的操作栏后就不再做公众号了,很影响体验

    05-20
    赞同
    回复 1
    • wyl
      wyl
      05-20

      这个公众号在操作栏之前就已经做了。

      05-20
      回复
  • wyl
    wyl
    05-20

    请问可以怎样避免出现这种被遮挡的情况吗?

    05-20
    赞同
    回复