github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 18:18:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(website): replace problematic svg with png for Safari (#5536)

Browse Source 
more Safari SVG issues...
This commit is contained in:
Jamil
2024-06-24 22:43:31 -07:00
committed by GitHub
parent a2c76cbeb8
commit 080aaaf0f1
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/public/images/scale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

17
website/src/components/Animations/SpeedChart.tsx
View File

@@ -1,9 +1,12 @@
"use client";
import { motion } from "framer-motion";
import { isSafari } from "react-device-detect";
import Image from "next/image";
export default function SpeedChart() {
return (
return isSafari ? (
<Image src="/images/scale.png" width="656" height="464" alt="Speed Chart" />
) : (
<svg viewBox="0 0 656 464" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="656" height="464" rx="6" fill="#FCFCFC" />
<path
@@ -20,7 +23,7 @@ export default function SpeedChart() {
strokeWidth="8"
strokeLinecap="round"
strokeLinejoin="round"
initial={isSafari ? { pathLength: 1 } : { pathLength: 0 }}
initial={{ pathLength: 0 }}
whileInView={{ pathLength: 1 }}
transition={{ delay: 1, duration: 2, type: "spring" }}
viewport={{ once: true }}
@@ -40,7 +43,7 @@ export default function SpeedChart() {
strokeLinejoin="round"
/>
<motion.circle
initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 1.1, duration: 0.2, type: "spring" }}
viewport={{ once: true }}
@@ -50,7 +53,7 @@ export default function SpeedChart() {
fill="#FF7300"
/>
<motion.circle
initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 1.2, duration: 0.2, type: "spring" }}
viewport={{ once: true }}
@@ -60,7 +63,7 @@ export default function SpeedChart() {
fill="#FF7300"
/>
<motion.circle
initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 1.35, duration: 0.2, type: "spring" }}
viewport={{ once: true }}
@@ -70,7 +73,7 @@ export default function SpeedChart() {
fill="#FF7300"
/>
<motion.circle
initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 0.2, type: "spring" }}
viewport={{ once: true }}
@@ -80,7 +83,7 @@ export default function SpeedChart() {
fill="#FF7300"
/>
<motion.circle
initial={isSafari ? { opacity: 1 } : { opacity: 0 }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 1.6, duration: 0.2, type: "spring" }}
viewport={{ once: true }}