Fixed header disapearing on ios safari bounce

Question

Current results:

Expected results:

You can see an actual example here if you have an iOS device: client.wildfyre.net

How can I fix this?

Code:

    #topNav {
      height: 50px;
      margin: 0 auto;
      background-color: #263238;
      color: white;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 5;
    }

    #topNavMenu {
      position: fixed;
      right: -20px;
      top: 7px;
    }

Answer 1

First of all, you should understand what is causing the problem.

If you remove the 'mat-drawer-content' class and the transition inline styles, then you will get rid of the scrolling effect.

Now, if you want the scrolling effect and don't want to see this issue, then we have 2 solutions:

1. Remove <nav> as a child of 'mat-drawer-content' div and add as a sibling, so that the transition effect is not applied on the <nav> tag.

or

2. Add an overflow: hidden property on the 'mat-drawer-content'.

I tried both of them on the real device and it works. Attached Screenshot from iphoneX.