公告列表
公告列表
收藏
回答

页面上有一个view用了fixed固定在顶部，滚动过程偶尔会出现1px缝隙

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 7.0.12 2.11.0

页面上有一个view用了fixed固定在顶部，刚进入第一眼看是没问题的。但页面在滚动过程中，有时顶部就会出现1px的缝隙，并能透过缝隙看到底下滚动层的内容。如截图所示（问题出现过程请看视频：http://www.brandyond.com/public/video/1.mp4，缝隙出现在第15秒和53秒）

最后一次编辑于  2020-05-13
回答关注问题邀请回答
收藏

10 个回答

  • 😝NULL😝
    😝NULL😝
    2021-01-29
    transform: translate3d(0,-1px,0);

    使用transfrom上移1像素，然后高度增加1像素，或者top:-1px;

    2021-01-29
    有用 2
    回复 3
    • yemin
      yemin
      2021-06-02
      你这个方法要是能用，那也不是问题了
      2021-06-02
      赞
      回复
    • Wintertime
      Wintertime
      2021-09-15
      这个方法对xr 有用
      2021-09-15
      赞
      回复
    • 过客
      过客
      2023-12-18
      亲测能用👍
      2023-12-18
      赞
      回复
  • 西子鹤唳
    西子鹤唳
    2023-12-28

    方法一、可以使用最外层包一个容器，背景色设置同样的，就没这个问题

    方法二、设置top或margin-top或者transform的translateY让它向上偏移几个像素

    方法二、box-shadow

    box-shadow: 0 -2rpx #fff; # #fff 是对应背景色


    2023-12-28
    有用
    回复
  • 阿豪
    阿豪
    2023-06-29

    请问楼主现在解决了吗，我也遇到了

    2023-06-29
    有用
    回复
  • 章巍
    章巍
    2021-04-06

    有没有临时解决方案？

    2021-04-06
    有用
    回复
  • ColeZhou
    ColeZhou
    2021-01-22

    我们也遇到过几次这种问题，问题是偶现的，可以参考下。

    简单说下我遇到的问题出现的场景：

    1）主页面有一个悬浮在头部的元素；

    2）有一个内容高度为100vh的fixed悬浮元素覆盖在这个主页面上。

    解决办法：

    给fixed悬浮元素的定位属性添加成top:-1px;bottom:0; 。然后高度100vh不设置到这个悬浮元素上，改为设置到悬浮元素内容里面。悬浮元素总体的高度根据定位属性来的top:-1px;bottom:0; 来确定。

    2021-01-22
    有用
    回复
  • temp
    temp
    2020-05-28

    https://developers.weixin.qq.com/community/develop/doc/000e4c58e4c700e7cf89bafb251400

    2020-05-28
    有用
    回复
  • yemin
    yemin
    发表于移动端
    2020-05-21
    一样的问题，大家都解决了么
    2020-05-21
    有用
    回复 1
    • 百村
      百村
      2020-05-25
      未解决
      2020-05-25
      赞
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2020-05-13

    请具体描述问题出现的流程，并提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-05-13
    有用
    回复 12
    • 百村
      百村
      2020-05-13
      您好，代码片段已私信您。请查看一下，谢谢。
      问题出现过程：刚进入页面，是没有缝的，但在页面上下滚动的过程中，偶尔就会出现这条缝。具体我们录了个视频，即出现在此视频的第15秒和53秒。
      2020-05-13
      赞
      回复
    • 百村
      百村
      2020-05-18
      您好，这个问题的详细描述和复现问题的片段，上周四已发您的私信，麻烦帮忙看看找下原因，盼回复，谢谢。
      2020-05-18
      赞
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2020-05-18回复百村
      好的，问题在跟进中，有结果再同步
      2020-05-18
      赞
      回复
    • Mr.Wong
      Mr.Wong
      发表于移动端
      2020-08-15回复疯狂的小辣椒
      我们也一样碰到这个问题，在xr和iPhone11前面都有，这两个机型屏幕是一样的
      2020-08-15
      赞
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2020-08-17回复Mr.Wong
      微信版本更新至最新的7.0.15试试呢
      2020-08-17
      赞
      回复
    查看更多(7)
  • 纸玫瑰
    纸玫瑰
    2020-05-13

    css里fiexd的View top:-1px 试试

    2020-05-13
    有用
    回复 1
    • 百村
      百村
      2020-05-13
      谢谢提供思路，有试过了，fiexd的View top:-1px，margin-top:-1px，还有page的top:-1px，margin-top:-1px都试过，全没用
      2020-05-13
      赞 1
      回复
  • Admin ²º²⁴
    Admin ²º²⁴
    2020-05-13

    谢邀，这个问题我也碰到过，某款安卓机上出现（就这一款手机，比较老的），我的解决方法是设置相关背景色跟状态栏颜色一样，那根白线就看不出来了。

    跟你这情况不一样，你这应该可以CSS解决下。真机调试，问题复现时找出问题调整css

    2020-05-13
    有用
    回复 4
    • 百村
      百村
      2020-05-13
      感谢您的回应，实际试了一下，这条缝穿过去，会看到底下滚动层的内容，所以page加了背景颜色也不能解决的。
      2020-05-13
      赞 1
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-05-13回复百村
      是，我这情况跟你不一样，你这个需要复现情况，真机调整css，把fix的顶部加高或者显示区域往上移一个px
      2020-05-13
      赞
      回复
    • 百村
      百村
      2020-05-13回复Admin ²º²⁴
      fiexd的View top:-1px，margin-top:-1px，还有page的top:-1px，margin-top:-1px都试过，和最外层的view也试过这样，问题依旧，让人抓狂。只是iPhoneXR上发现，不知道跟不跟他的宽度414px有没关系，我怀疑小程序的计算有问题
      2020-05-13
      赞
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-05-13回复百村
      真机调试，wxml页选择fix的view，然后看中间那条缝到底是啥
      2020-05-13
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
截图滚动视频