0

This is my site before opening the dialog: enter image description here

And this after: enter image description here

This is the relevant content of my styles.scss: 

html,
body {
  height: 100%;
  background: #303030;
  color: white;
}

And this is my theme of the project:

@import '../../../node_modules/@angular/material/theming';

@include mat-core();

$theme-primary: mat-palette($mat-grey, 900);
$theme-accent: mat-palette($mat-grey, 50);
$theme-warn: mat-palette($mat-red);

$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);

@include angular-material-theme($theme);

The problem only occurs, when scrolling down a bit. At the top of the page I have a mat-tab-nav-bar.

Update: Bug occurring in Chrome but not in Safari

Edric
  • 24,639
  • 13
  • 81
  • 91
Stefan
  • 11
  • 3
  • 1
    stackblitz please? – Aakash Garg May 23 '20 at 13:15
  • can you try to delete this line and test again? styles.scss: background: #303030; – Marc May 23 '20 at 13:54
  • @Marc without background color attribute, I don't have the problem. But I want the grey background. Do you have an idea how to change background color without having this bug? – Stefan May 23 '20 at 14:27
  • You can pick the 'grey' area with "web developer toolbar" and then you got the element and its class. ".mat-drawer" or whatever. If you know this, you can explicit set the background value for this class in your styles.scss – Marc May 23 '20 at 14:33
  • Aakash Garg is right: we need a stackblitz :-) – Marc May 23 '20 at 14:34
  • Thanks, @Marc! I've removed the background color attribute from body and html and added it to mat.figure and mat-grid-list.mat-grid-list. This has solved my problem! – Stefan May 23 '20 at 14:43

0 Answers0