diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 931f0a6524..b9b6a499f0 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -8,6 +8,7 @@ import {
 } from "lit";
 import { customElement, property } from "lit/decorators";
 import { NODE_SIZE, SPACING } from "./hat-graph-const";
+import { isSafari } from "../../util/is_safari";
 
 /**
  * @attribute active
@@ -42,6 +43,7 @@ export class HatGraphNode extends LitElement {
     const width = SPACING + NODE_SIZE;
     return html`
       <svg
+        class=${isSafari ? "safari" : ""}
         width="${width}px"
         height="${height}px"
         viewBox="-${Math.ceil(width / 2)} -${this.graphStart
@@ -125,6 +127,10 @@ export class HatGraphNode extends LitElement {
       :host([notEnabled]:hover) circle {
         --stroke-clr: var(--disabled-hover-clr);
       }
+      svg:not(.safari) {
+        width: 100%;
+        height: 100%;
+      }
       circle,
       path.connector {
         stroke: var(--stroke-clr);