Angular 8 remove weird lines from print media from printing mat-dialog in full screen size

Question

I have a mat-dialog in Angular 8 app and I have set it to full screen. But after printing, I received a weired border. Here is the image of the issue

To call the mat-dialog, I have used,

this.dialog.open(MaterialDetailsComponent, {
      data: row, minWidth: '100vw'})

And my styles.css is,

@media print {
  app-footer  {
    display: none;
  }
  app-labour-value-estimate-print-layout {
    display: block;
  }
  .material-details-container-div {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    text-shadow: none;
  }
}

Answer 1

I have found what was the problem. It was the background graphics that were still interfering. So all I did is increased the width of the dialog from 100vw to 100.5vw and it solved the issue.

this.dialog.open(MaterialDetailsComponent, {
      data: row, minWidth: '100.5vw'})