fixed menu inside fixed div with webkit overflow scrolling flickers/judders on ios

i have a fixed div with menu inside which will get fixed once scrolled by certain position. For smooth scrolling on ios i applied -webkit-overlow-scrolling:touch. This makes the scrolling smooth on ios but the fixed menu now flickers. Heres the jsfiddle https://jsfiddle.net/rkaaruk0/15/ Please check this 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)
}

I have tried many solutions provided on similar question but none of them seems to work.