iOS safari滚动时，背景颜色渲染的bug

Question

HTML结构如下：

<div class="top"></div>
<div class="content">
    <div class="group">
        <a class="item" href="###">列表项</a>
        ...
    </div>
    ...
</div>
<div class="bottom"></div>

CSS

html, body{
    height: 100%;
    overflow: hidden;
}
.top{
    /* fixed固定顶部，代码略 */
    height: 40px;
}
.bottom{
    /* fixed固定底部，代码略 */
    height: 60px;
}
.content{
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 40px 0 60px;
    -webkit-overflow-scrolling: touch;
    background-color: #ededed;
}
.group{
    margin-bottom: 6px;
}
.item{
    background-color: #fff;
}

在真机上滑动时(iOS 10)会出现不正常。

正常表现(这是我在练习vue模拟的微信界面，不要吐槽)：

其中，“摇一摇”背景色是手指触摸时触发的:active伪类，请忽略；“发现”是顶部条，到“朋友圈”之间的那个空白区域就是露出来的.content的背景色。
在
1、滑动到最顶部后，如果继续向下拉
2、滑动到最底部后，如果继续向上拉
背景颜色就会变成白色：

如果
1、滑动到最顶部后，稍微向上拉一些，再向下拉
2、滑动到最底部后，稍微向下拉一些，再向上拉
就会恢复正常。

请教各位大神，有遇到过这种情况的吗？怎么解决？谢谢~

Answer 1

两个可能：

1.问题出现在 -webkit-overflow-scrolling: touch 上
为了弹性滚动引入原生组件，自然兼容要差点
解决也很简单，给它加上 3D transform 就好了，比如 translateZ、translate3d

2.你这里有两层可滚动区域
既然你这里上下都 fixed 了，为啥还要指定可滚动区域 height: 100%?