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.
it actually has fixed my issue as I had described initially, but the side effect was that the navigation bar was hidden behind the URL bar when scrolling to the top. That is why I would not recommend to include the CSS to the core.