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

fix(website): Disable SVG animations in Safari (#5524)

Browse Source 
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
This commit is contained in:
Jamil
2024-06-24 15:37:17 -07:00
committed by GitHub
parent fb5bda81e8
commit ef13e8bc25
6 changed files with 80 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/package.json
View File

@@ -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",

83
website/pnpm-lock.yaml generated
View File

@@ -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:

11
website/src/components/Animations/ComplianceDiagram.tsx
View File

@@ -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 }}

7
website/src/components/Animations/SimpleArchitecture.tsx
View File

File diff suppressed because one or more lines are too long

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

@@ -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 }}

15
website/src/components/Animations/UpgradeDiagram.tsx
View File

@@ -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 }}