I tried to search the web for this problem. It seems that there is an issue in mobile safari with fixed positions. See for instance here
I added the css code -webkit-transform: translate3d(0,0,0); into my css class .main-navigation and this fixed the bug. However, sometimes the navbar is hidden behind the URL bar when scrolling to the top.
Anyways, I will leave it as it is.