微信页面上拉时为何会遮住底部购物车栏？

Question

如图所示，苹果手机中的页面上拉。

稍微等一会再拉就不会出现这种情况了，如何处理？

购物车栏css代码：

.business_box .shopping_car {
    height: 45px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #3d3d3f;
    padding-left: 88px;
    box-sizing: border-box;
    z-index: 300;
}

Answer 1

最后的解决方法：
在页面最外层div上加入这些属性

.business_box {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    overflow: hidden;
    position: relative;
}

然后让底部购物车栏绝对定位，跟着页面滑动。

Answer 2

这个问题我遇到过，主要是你包裹内容和购物车区域的框设置了height:100%;overflow:hidden;两种解决方案，
1，就是你这种绝对定位，随着页面滚动，
2，就是把购物车放到最外层的结构，没有overflow:hidden的那层结构里面去。

第二种视觉上比较好。

Answer 3

测试了下，没发现这问题呀
我怀疑是父级高度的问题
早期 类似的问题应该是  fixed 和手机软键盘的冲突
**你这个黑条是哪里来的 这就很关键了**

祝早日解决问题！thanks

Answer 4

浏览器特性吧。你用了fixed 脱离文档流是固定在窗口上的。你上拉的时候是浏览器的弹簧效果，浏览器的容器本身是黑的就罩住了。也是fixed的一个坑。可以用padding解决底部tab的问题