Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sidenav not working in mobile Safari

See original GitHub issue

Bug, feature request, or proposal:

Bug - Sidenav won’t toggle on iOS

What is the expected behavior?

Sidenav should toggle

What is the current behavior?

Sidenav doesn’t show but overlay does

What are the steps to reproduce?

Setup basic sidenav

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Mobile safari on iOS 10. Tried material 2 beta 8,9,10,11

Is there anything else we should know?

I just have a basic sidenav. When toggle is called, the overlay shows and grays the window but the sidenav doesn’t show

<md-sidenav-container>
  <md-sidenav id="sidenav-main" #sidenav [mode]="sidenavMode" [opened]="startOpened">
    <md-toolbar color="primary" class="above">
      <a href="/" class="router-link-active"><img src="../assets/logo-white.png" style="filter: hue-rotate(0deg);"></a>
    </md-toolbar>
    <md-nav-list>

      <h3 md-subheader>Menu</h3>
      <ng-container *ngFor="let item of navItems">
        <md-list-item (click)="item.click()" *ngIf="item.visible()">
          <md-icon md-list-icon>{{item.icon}}</md-icon>
          <h4 md-line style="width: 100%">{{item.title}}</h4>
        </md-list-item>
      </ng-container>

    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary" class="above" id="toolbar-main">
    <button md-icon-button (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <span class="thin" style="text-transform: capitalize;">{{stateName}}</span>
    <span fxFlex="100%"></span>
    <h4 class="thin" *ngIf="authService.isLoggedIn()" style="text-transform: uppercase">HI {{authService.getName()}}!</h4>
  </md-toolbar>
  <router-outlet></router-outlet>
</md-sidenav-container>
<button md-mini-fab class="fab-right" (click)="addEvent()" *ngIf="router.url == '/hometime'">
  <md-icon>add</md-icon>
</button>

`

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

timdoescommented, Oct 2, 2017

I am experiencing this exact issue but it is on every dev environment.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 7, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Sidenav trigger not working on Safari/iOS PWA - Stack Overflow

I have an issue with a sidenav trigger on iOS/Safari. It just doesn't open the sidenav or react in any way. Has anyone...

Sidenav not working in mobile Safari · Issue #7379 - GitHub

I ultimately built the project on another dev pc and the issue went away. At any rate, it doesn't appear to be an...

Safari Sidebar Bug - Apple Support Communities

There seems to be a bug with the sidebar button in Safari. I have the button showing in the toolbar and when I...

Sidenav disappears on scroll on mobile device

Seems to me that this issue reported here: https://mdbootstrap.com/support/problem-with-sidenav-on-mobile-device/ is still present. If you open the sidenav ...

iPadOS 15 Safari Sidebar and Bookmarks | Page 4

This flaw reveals a problem at every step in Apple iOS Safari development. Maybe it is my imagination but I find that happening...