Angular Material navbar broken on iOS

felepp commented 4 years ago

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Navbar is invisible on iOS device(s) when using Angular Material. Buttons are invisible, but are still clickable and function normally. Using Bootstrap with fixed-top navbar is working as expected.

The issue seems to stem from the mat-sidenav setup and these styles inside of the header-/shell-component

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.mat-sidenav,
.mat-drawer-content,
// Force style down to child components
// See https://angular.io/guide/component-styles#deep
:host ::ng-deep .mat-drawer-backdrop {
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  position: absolute;
}

@media ($mat-xsmall) {
  .mat-sidenav,
  .mat-drawer-content,
  :host ::ng-deep .mat-drawer-backdrop {
    top: 56px;
  }
}

You can find many issues surrounding iOS and fixed elements. I've tried solutions to similar problems, but have reached the limitations of my CSS/Angular Material knowledge. If you don't have access to an iOS device, I'd be happy to test any possible solutions.

Expected behavior

Navbar should be visible.

Minimal reproduction of the problem with instructions

ngx new with Angular Material -> View on iOS device

Screenshot

Tested with Safari, Firefox and Chrome on iPhone 7 with current iOS.

Environment



ngX-Rocket: 7.1.0       
Node.js: v12.8.0        
Npm: 6.11.2
OS: win32 x64 10.0.18362

Generated project options: 
{
  "generator-ngx-rocket": {
    "version": "7.1.0",    
    "props": {
      "location": "path",  
      "strict": false,     
      "skipInstall": false,
      "skipQuickstart": false,
      "initGit": true,
      "appName": "ngx rocket test 2",
      "target": [
        "web"
      ],
      "pwa": true,
      "ui": "material",
      "layout": "simple",
      "auth": true,
      "lazy": true,
      "angulartics": false,
      "tools": [
        "prettier",
        "hads"
      ],
      "utility": [],
      "projectName": "ngx-rocket-test-2",
      "packageManager": "npm",
      "mobile": [],
      "desktop": []
    }
  }
}

Angular CLI: 8.1.3
Node: 12.8.0
OS: win32 x64
Angular: 8.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/cdk                      8.2.2
@angular/cli                      8.1.3
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.2
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.35.2

felepp commented 4 years ago

Ok, after some more googling, I found a workaround/solution. Now everything looks fine. Is there a reason this is not in the default template?

sinedied commented 4 years ago

@tracyjordan Just that I did not have the chance to test the workaround and check that it does not break something else in the layout. If you made some tests with it, you can always propose a pull request with the fix 😉

sinedied commented 4 years ago

BTW, this is duplicate of #215

ngx-rocket / generator-ngx-rocket