Skip to content

angular sidenav responsive menu button toggle not working in safari until reload #14123

Open
@alejandromartincruz

Description

@alejandromartincruz

Bug, feature request, or proposal:

When resizing from desktop to mobile size in Safari sidenav menu button do not displays until reload in mobile size.
If load on mobile size and reload to desktop size again with safari, then sidenav menu button won't dissapear until reload page in desktop size.

What is the expected behavior?

When resizing from desktop to mobile sidenav menu button should appear, and when resizing again to desktop should dissapear. In Chrome, and firefox it works, it only fails with safari.

What is the current behavior?

Button do not appear or dissapear when the media query breakpoints are reached only with safari browser.

What are the steps to reproduce?

$ ng new myproject
$ ng generate @angular/material:materialNav --name navigation
// remove <router-outlet></router-outlet> and add <navigation></navigation> to the app.component.html
$ ng serve

open safari with desktop width size and resize window to mobile size, button won't appear. Reload in mobile size and button will appear. Resize again to desktop size and button won't dissapear. Reload the page in desktop size and button will vanish.

What is the use-case or motivation for changing an existing behavior?

It works fine with any other browser, but it's not working with safari

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

Angular CLI: 7.0.5
Node: 8.9.4
OS: darwin x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.3
@angular-devkit/build-angular 0.10.3
@angular-devkit/build-optimizer 0.10.3
@angular-devkit/build-webpack 0.10.3
@angular-devkit/core 7.0.3
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@ngtools/webpack 7.0.3
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions