iPad Scrolling: navigation overlapped

Hi!

I have built a website using the Zerif theme but ran into the following problem:

when I am displaying the website on my iPad, the page looks just fine. When I am at the very top of the page and I try to scroll up even further, the entire website just moves down further. This is fine and works as with every other website, for which you are trying to do the same on your iPad. However, the background image stays fixed at the very top of the browser screen and starts overlaying the navigation bar (which is usually fixed at the top) down from above.

please have a look at these two pictures i took: https://www.dropbox.com/sh/nldlxfxnunsduvh/AACb2YTQaNGjw8kLhnVkPOUOa?dl=0

i tried solving the problem by adjusting the z-index of the navigation bar/ header, but it wouldn’t work.

does anyone have any idea how to solve this?