Components: Sidenav not working in mobile Safari

[daxsom]

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

```javascript

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

menu

{{stateName}}

HI {{authService.getName()}}!

add

`

[daxsom]

``json "dependencies": { "@agm/core": "^1.0.0-beta.0", "@angular/animations": "4.3.6", "@angular/cdk": "^2.0.0-beta.8", "@angular/common": "4.3.6", "@angular/compiler": "4.3.6", "@angular/compiler-cli": "4.3.6", "@angular/core": "4.3.6", "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "4.3.6", "@angular/http": "4.3.6", "@angular/material": "^2.0.0-beta.8", "@angular/platform-browser": "4.3.6", "@angular/platform-browser-dynamic": "4.3.6", "@angular/router": "4.3.6", "@types/hammerjs": "^2.0.34", "angular2-jwt": "^0.2.3", "ap-angular2-fullcalendar": "^1.3.0", "c3": "^0.4.13", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "d3": "^4.9.1", "file-saver": "^1.3.3", "hammerjs": "^2.0.8", "intl": "^1.2.5", "moment": "^2.18.1", "ng2-pdf-viewer": "^1.1.0", "ngx-facebook": "^2.4.0", "rxjs": "^5.1.0", "web-animations-js": "^2.2.5", "webpack": "^3.5.6", "zone.js": "^0.8.5" }, "devDependencies": { "@angular/cli": "^1.3.2", "@angular/compiler-cli": "4.3.6", "@types/c3": "0.4.43", "@types/d3": "4.9.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.4.2", "typescript": "^2.3.4" }

Last reverted to beta 8

[josephperrott]

Can you provide a reproduction? I was not able to reproduce it myself, you can see here a version working as expected.

[daxsom]

I ultimately built the project on another dev pc and the issue went away. At any rate, it doesn't appear to be an issue with material but perhaps my dev environment. My apologies, closing.

[timdoes]

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

[angular-automatic-lock-bot[bot]]

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.

<sub>_This action has been performed automatically by a bot._</sub>