Current results:

Expected results:

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

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;
    }

Current results:

Expected results:

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

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;
    }

• javascript
• css
• angular

• your example requires login credentials – Joshua Chan Commented May 12, 2018 at 16:25
• You dont need to login to see the bug, the header is at the top – Cameron Gilbert Commented May 12, 2018 at 16:26

3 Answers 3

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.

I have debugged it and the only solution that i figure out is you have to move the nav tag for sure including what inside it and don't move the other nav tags like that so the red ones leave them as it is and the blue one move it up

<nav aria-label="Navigation links" class="mat-tab-nav-bar mat-primary" id="topNav" md-tab-nav-bar=""></nav>

outside from that div

<div cdk-scrollable="" class="mat-drawer-content" style="margin-left: 0px; margin-right: 0px; transform: translate3d(0px, 0px, 0px);">

once the nav tag outside that div class="mat-drawer-content" everything will be fine because this class="mat-drawer-content" when you scroll it moves the whole ponent and thats cause this issue

I found that the problem is the css overflow property for the class .mat-drawer-content; just remove the overflow: auto; from that class or set it to hidden, and the bug will be gone in Safari iOS. I also tested in other browser and platforms, and removing that property doesn't seems to affect anything else.

Hope it helps!