固定div内的固定菜单，webkit溢出滚动闪烁/ ios上的抖动

Question

我有一个带有菜单的固定div，一旦滚动到某个位置就会得到修复。为了在ios上平滑滚动我应用-webkit-overlow-scrolling：touch。这使得ios上的滚动顺畅，但固定菜单现在闪烁。 继承人jsfiddle https://jsfiddle.net/rkaaruk0/15/ 请检查这款iphone

html {
    height: 100%;
}
body{
  min-height:100%;
}
.overlay{
  position:fixed;
  width:100%;
  height:100vh;
  -webkit-overflow-scrolling:touch;
  overflow-y:scroll;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(116,114,111,0.85);  ;
}
.fixed{
  position:fixed;
  width:100%;
  top:0;
  z-index:9;
  background:red;
  color:white;
  height: 58px;
  paddding:40px 0px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0)
}

我已尝试过针对类似问题提供的许多解决方案，但它们似乎都没有效果。