mat-checkbox doesn't render properly inside npx-graph in safari

Question

Have an issue with mat-checkbox in safari and npx-grpah. as you can see below on the screens.

this is chrome and on charts mat-checkbox appears properly in every node.

and this is a safari screen. For some reason, the mat-checkbox appears in the top left corner. I assume there is some problem with safari rendering. I also tried to put this component dynamicaly and I got the same result.

<ngx-graph
  [view]="[800, 200]"
  [showMiniMap]="true"
  [links]="[
    {
      id: 'a',
      source: 'first',
    target: 'second',
      label: 'is parent of'
    }, {
      id: 'b',
      source: 'first',
      target: 'third',
      label: 'custom label'
    }
  ]"
  [nodes]="[
    {
      id: 'first',
      label: 'A'
    }, {
      id: 'second',
      label: 'B'
    }, {
      id: 'third',
      label: 'C'
    }
  ]"
>
  <ng-template #nodeTemplate let-node>
    <svg:foreignObject width="100" height="100">
      <div>Your HTML here</div>
      <mat-checkbox></mat-checkbox>
    </svg:foreignObject>
  </ng-template>
</ngx-graph>

app.component.html

import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'npx-graph';
    }

app.component.ts

so there is nothing complex, but it doesn't work in Safari. Thank you in advance for any idea

mat-checkbox doesn't render properly inside npx-graph in safari

0 Answers0