mat-toolbar does not display correctly on Safari, iOS simulator and Android emulator

See original GitHub issue

Bug, feature request, or proposal:

  • Bug

What is the expected behavior?

mat-toolbar display correctly on all (recent) desktop and mobile browsers.

What is the current behavior?

mat-toolbar does not display correctly on Safari, iOS simulator and Android emulator. Works fine on Chrome and real Android devices (using Chrome webview).

capture d ecran 2018-01-15 a 16 16 50

Safari shows the issue here, but the behavior is the same on android/ios simulator webview.

What are the steps to reproduce?

  1. clone this repo: https://github.com/ngx-rocket/starter-kit/tree/pwa/material
  2. git checkout pwa/material
  3. npm install
  4. npm start and load the website on safari

I tried to reproduce a simpler case on StackBlitz but could not find a productible minimal setup. I’m also investigating if it’s somehow related to the inclusion of @angular/flex-layout

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

Not really usable as it is 😃

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

@angular/cdk: 5.0.4
@angular/cli: 1.5.5
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.4
@angular/service-worker: 1.0.0-beta.16
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.8.1

tested with safari 11.02, nexus 6/android 7 android emulator and ios 11.2 simulator.

Note that the provided repo use an older angular-material rc.2 version, but the issue is the same with the latest current version shown here I took the screenshot with.

Is there anything else we should know?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:5
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
nabivachcommented, Dec 24, 2018

Hi, I found a temporary fix for my project, but I’m not sure that this is correct…

1) Move <app-header> to the top of the root <div> of the shell.component.html

Example:

<div fxFlex>
  <app-header></app-header>
  <mat-sidenav-container fxFill>
    <mat-sidenav></mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

2) Add the following style to the shell.component.scss

.mat-drawer-container {
  position: unset;
}
2reactions
mrmokwacommented, Nov 22, 2019

Same problem for my app. IOS 12.4.2 Angular Material: 8.2.3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Simulator device not showing in Safari develop tool
When I launch, say, the iPhone SE simulator, open a web page in Safari mobile, I don't see the Simulator device in Safari/develop...
Read more >
matTooltip not working correctly on iOS (Safari) - Stack Overflow
I'm using the Tooltip from Angular Material and the tooltip doesn't display correctly on iOS (Safari). This is the behavior I experience:.
Read more >
Angular Material Toolbar Not Working Correctly On Mobile
Simulator device not showing in Safari develop tool When I launch, say, the iPhone SE simulator, open a web page in Safari mobile,...
Read more >
How to Use Developer Tools for Mobile Safari on an iPhone ...
In this video I show how you can use an iPhone simulator on Macs to use browser developer tools on the mobile version...
Read more >
Bountysource
mat-toolbar does not display correctly on Safari, iOS simulator and Android emulator.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found