From ef13e8bc259e618838c980a78cc293e6321b302e Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Mon, 24 Jun 2024 15:37:17 -0700
Subject: [PATCH] fix(website): Disable SVG animations in Safari (#5524)

Unfortunately these case the SVGs not to animate, which means major
pieces of them fail to appear.

Instead, we simply disable animations in Safari by setting their
end-state `opacity` and `pathLength` to the desired state.
refs #5061
---
 website/package.json                          |  1 +
 website/pnpm-lock.yaml                        | 83 ++++++++++++-------
 .../Animations/ComplianceDiagram.tsx          | 11 +--
 .../Animations/SimpleArchitecture.tsx         |  7 +-
 .../src/components/Animations/SpeedChart.tsx  | 13 +--
 .../components/Animations/UpgradeDiagram.tsx  | 15 ++--
 6 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/website/package.json b/website/package.json
index ca613806c..31c8467a4 100644
--- a/website/package.json
+++ b/website/package.json
@@ -37,6 +37,7 @@
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.38",
     "react": "18.3.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.3.1",
     "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.2.1",
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 68cca0158..758f081ee 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@docsearch/react':
         specifier: ^3.6.0
-        version: 3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.14.0)
+        version: 3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.14.0)
       '@mdx-js/loader':
         specifier: ^3.0.1
         version: 3.0.1(webpack@5.92.0)
@@ -19,10 +19,10 @@ importers:
         version: 3.0.1(@types/react@18.3.3)(react@18.3.1)
       '@next/mdx':
         specifier: ~14.2.3
-        version: 14.2.3(@mdx-js/loader@3.0.1)(@mdx-js/react@3.0.1)
+        version: 14.2.3(@mdx-js/loader@3.0.1(webpack@5.92.0))(@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1))
       '@next/third-parties':
         specifier: ^14.2.3
-        version: 14.2.3(next@14.2.3)(react@18.3.1)
+        version: 14.2.3(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@types/mdx':
         specifier: ^2.0.11
         version: 2.0.13
@@ -55,10 +55,10 @@ importers:
         version: 2.3.0
       flowbite-react:
         specifier: ^0.9.0
-        version: 0.9.0(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.4)
+        version: 0.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.4)
       framer-motion:
         specifier: ^11.2.4
-        version: 11.2.10(react-dom@18.3.1)(react@18.3.1)
+        version: 11.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       google:
         specifier: link:@next/third-parties/google
         version: link:@next/third-parties/google
@@ -73,25 +73,28 @@ importers:
         version: 2.52.0
       next:
         specifier: ^14.1.3
-        version: 14.2.3(react-dom@18.3.1)(react@18.3.1)
+        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-hubspot:
         specifier: ^1.3.0
-        version: 1.3.0(next@14.2.3)(react-dom@18.3.1)(react@18.3.1)
+        version: 1.3.0(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-sitemap:
         specifier: ^4.2.3
-        version: 4.2.3(next@14.2.3)
+        version: 4.2.3(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       postcss:
         specifier: 8.4.38
         version: 8.4.38
       react:
         specifier: 18.3.1
         version: 18.3.1
+      react-device-detect:
+        specifier: ^2.2.3
+        version: 2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
       react-fast-marquee:
         specifier: ^1.6.4
-        version: 1.6.4(react-dom@18.3.1)(react@18.3.1)
+        version: 1.6.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-icons:
         specifier: ^5.2.1
         version: 5.2.1(react@18.3.1)
@@ -1478,6 +1481,12 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
+  react-device-detect@2.2.3:
+    resolution: {integrity: sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==}
+    peerDependencies:
+      react: '>= 0.14.0'
+      react-dom: '>= 0.14.0'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -1766,6 +1775,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ua-parser-js@1.0.38:
+    resolution: {integrity: sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -1979,13 +1991,14 @@ snapshots:
 
   '@docsearch/css@3.6.0': {}
 
-  '@docsearch/react@3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.14.0)':
+  '@docsearch/react@3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.14.0)':
     dependencies:
       '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)(search-insights@2.14.0)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)
       '@docsearch/css': 3.6.0
-      '@types/react': 18.3.3
       algoliasearch: 4.23.3
+    optionalDependencies:
+      '@types/react': 18.3.3
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.14.0
@@ -2001,15 +2014,15 @@ snapshots:
       '@floating-ui/core': 1.6.0
       '@floating-ui/utils': 0.2.2
 
-  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1)(react@18.3.1)':
+  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/dom': 1.6.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@floating-ui/react@0.26.10(react-dom@18.3.1)(react@18.3.1)':
+  '@floating-ui/react@0.26.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@floating-ui/utils': 0.2.2
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2094,11 +2107,12 @@ snapshots:
 
   '@next/env@14.2.3': {}
 
-  '@next/mdx@14.2.3(@mdx-js/loader@3.0.1)(@mdx-js/react@3.0.1)':
+  '@next/mdx@14.2.3(@mdx-js/loader@3.0.1(webpack@5.92.0))(@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1))':
     dependencies:
+      source-map: 0.7.4
+    optionalDependencies:
       '@mdx-js/loader': 3.0.1(webpack@5.92.0)
       '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1)
-      source-map: 0.7.4
 
   '@next/swc-darwin-arm64@14.2.3':
     optional: true
@@ -2127,9 +2141,9 @@ snapshots:
   '@next/swc-win32-x64-msvc@14.2.3':
     optional: true
 
-  '@next/third-parties@14.2.3(next@14.2.3)(react@18.3.1)':
+  '@next/third-parties@14.2.3(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      next: 14.2.3(react-dom@18.3.1)(react@18.3.1)
+      next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       third-party-capital: 1.0.20
 
@@ -2602,10 +2616,10 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  flowbite-react@0.9.0(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.4):
+  flowbite-react@0.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.4):
     dependencies:
       '@floating-ui/core': 1.6.0
-      '@floating-ui/react': 0.26.10(react-dom@18.3.1)(react@18.3.1)
+      '@floating-ui/react': 0.26.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classnames: 2.5.1
       debounce: 2.0.0
       flowbite: 2.3.0
@@ -2636,11 +2650,12 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@11.2.10(react-dom@18.3.1)(react@18.3.1):
+  framer-motion@11.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
+      tslib: 2.6.3
+    optionalDependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      tslib: 2.6.3
 
   fsevents@2.3.3:
     optional: true
@@ -3416,21 +3431,22 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-hubspot@1.3.0(next@14.2.3)(react-dom@18.3.1)(react@18.3.1):
+  next-hubspot@1.3.0(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.3(react-dom@18.3.1)(react@18.3.1)
+      next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
+    optionalDependencies:
       react-dom: 18.3.1(react@18.3.1)
 
-  next-sitemap@4.2.3(next@14.2.3):
+  next-sitemap@4.2.3(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@corex/deepmerge': 4.0.43
       '@next/env': 13.5.6
       fast-glob: 3.3.2
       minimist: 1.2.8
-      next: 14.2.3(react-dom@18.3.1)(react@18.3.1)
+      next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next@14.2.3(react-dom@18.3.1)(react@18.3.1):
+  next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.3
       '@swc/helpers': 0.5.5
@@ -3527,8 +3543,9 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.4.38):
     dependencies:
       lilconfig: 3.1.2
-      postcss: 8.4.38
       yaml: 2.4.5
+    optionalDependencies:
+      postcss: 8.4.38
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -3572,13 +3589,19 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  react-device-detect@2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      ua-parser-js: 1.0.38
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-fast-marquee@1.6.4(react-dom@18.3.1)(react@18.3.1):
+  react-fast-marquee@1.6.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -3929,6 +3952,8 @@ snapshots:
 
   typescript@5.4.5: {}
 
+  ua-parser-js@1.0.38: {}
+
   undici-types@5.26.5: {}
 
   unified@11.0.4:
diff --git a/website/src/components/Animations/ComplianceDiagram.tsx b/website/src/components/Animations/ComplianceDiagram.tsx
index bf7b0e7ca..6f88b0df0 100644
--- a/website/src/components/Animations/ComplianceDiagram.tsx
+++ b/website/src/components/Animations/ComplianceDiagram.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { motion } from "framer-motion";
+import { isSafari } from "react-device-detect";
 
 export default function ComplianceDiagram() {
   return (
@@ -389,7 +390,7 @@ export default function ComplianceDiagram() {
         </g>
         <motion.g
           filter="url(#filter2_d_1082_965)"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.2 }}
           viewport={{ once: true }}
@@ -422,7 +423,7 @@ export default function ComplianceDiagram() {
         </motion.g>
         <motion.g
           filter="url(#filter3_d_1082_965)"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.4 }}
           viewport={{ once: true }}
@@ -455,7 +456,7 @@ export default function ComplianceDiagram() {
         </motion.g>
         <motion.g
           filter="url(#filter4_d_1082_965)"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.6 }}
           viewport={{ once: true }}
@@ -488,7 +489,7 @@ export default function ComplianceDiagram() {
         </motion.g>
         <motion.g
           filter="url(#filter5_d_1082_965)"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.8 }}
           viewport={{ once: true }}
@@ -521,7 +522,7 @@ export default function ComplianceDiagram() {
         </motion.g>
         <motion.g
           filter="url(#filter6_d_1082_965)"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 1 }}
           viewport={{ once: true }}
diff --git a/website/src/components/Animations/SimpleArchitecture.tsx b/website/src/components/Animations/SimpleArchitecture.tsx
index 94c2d5a31..cc0c05d21 100644
--- a/website/src/components/Animations/SimpleArchitecture.tsx
+++ b/website/src/components/Animations/SimpleArchitecture.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { motion } from "framer-motion";
+import { isSafari } from "react-device-detect";
 
 export default function SimpleArchitecture() {
   return (
@@ -431,7 +432,7 @@ export default function SimpleArchitecture() {
         stroke="#7F3900"
         strokeWidth="5"
         strokeLinejoin="bevel"
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ duration: 0.5, delay: 1 }}
         viewport={{ once: true }}
@@ -442,7 +443,7 @@ export default function SimpleArchitecture() {
         strokeOpacity="0.2"
         strokeWidth="15"
         strokeLinejoin="bevel"
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.5 }}
         viewport={{ once: true }}
@@ -547,7 +548,7 @@ export default function SimpleArchitecture() {
           width="128"
           height="128"
           xlinkHref="data:image/png;base64,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"
-          initial={{ opacity: 0 }}
+          initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.5, delay: 1.5 }}
           viewport={{ once: true }}
diff --git a/website/src/components/Animations/SpeedChart.tsx b/website/src/components/Animations/SpeedChart.tsx
index c478e68dd..2f84adf51 100644
--- a/website/src/components/Animations/SpeedChart.tsx
+++ b/website/src/components/Animations/SpeedChart.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { motion } from "framer-motion";
+import { isSafari } from "react-device-detect";
 
 export default function SpeedChart() {
   return (
@@ -19,7 +20,7 @@ export default function SpeedChart() {
         strokeWidth="8"
         strokeLinecap="round"
         strokeLinejoin="round"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 2, type: "spring" }}
         viewport={{ once: true }}
@@ -39,7 +40,7 @@ export default function SpeedChart() {
         strokeLinejoin="round"
       />
       <motion.circle
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ delay: 1.1, duration: 0.2, type: "spring" }}
         viewport={{ once: true }}
@@ -49,7 +50,7 @@ export default function SpeedChart() {
         fill="#FF7300"
       />
       <motion.circle
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ delay: 1.2, duration: 0.2, type: "spring" }}
         viewport={{ once: true }}
@@ -59,7 +60,7 @@ export default function SpeedChart() {
         fill="#FF7300"
       />
       <motion.circle
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ delay: 1.35, duration: 0.2, type: "spring" }}
         viewport={{ once: true }}
@@ -69,7 +70,7 @@ export default function SpeedChart() {
         fill="#FF7300"
       />
       <motion.circle
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ delay: 1.5, duration: 0.2, type: "spring" }}
         viewport={{ once: true }}
@@ -79,7 +80,7 @@ export default function SpeedChart() {
         fill="#FF7300"
       />
       <motion.circle
-        initial={{ opacity: 0 }}
+        initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
         whileInView={{ opacity: 1 }}
         transition={{ delay: 1.6, duration: 0.2, type: "spring" }}
         viewport={{ once: true }}
diff --git a/website/src/components/Animations/UpgradeDiagram.tsx b/website/src/components/Animations/UpgradeDiagram.tsx
index 84dd9965a..16d530759 100644
--- a/website/src/components/Animations/UpgradeDiagram.tsx
+++ b/website/src/components/Animations/UpgradeDiagram.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { motion } from "framer-motion";
+import { isSafari } from "react-device-detect";
 
 export default function UpgradeDiagram() {
   return (
@@ -10,7 +11,7 @@ export default function UpgradeDiagram() {
       viewBox="0 0 798 373"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      initial={{ opacity: 0 }}
+      initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
       whileInView={{ opacity: 1 }}
       viewport={{ once: true }}
       transition={{ duration: 1.0, delay: 0.5, type: "tween" }}
@@ -165,7 +166,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}
@@ -176,7 +177,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}
@@ -187,7 +188,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}
@@ -198,7 +199,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}
@@ -209,7 +210,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}
@@ -220,7 +221,7 @@ export default function UpgradeDiagram() {
         strokeWidth="3"
         strokeLinejoin="bevel"
         strokeDasharray="6 6"
-        initial={{ pathLength: 0 }}
+        initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ delay: 1, duration: 1, type: "tween" }}
         viewport={{ once: true }}