From 70181310469554bfa58218a90a7697ed8261e4c2 Mon Sep 17 00:00:00 2001
From: Vladyslav Zubko <42296182+what1s1ove@users.noreply.github.com>
Date: Sat, 15 Jun 2024 19:18:23 +0300
Subject: [PATCH] fix(whatislove-dev/careers-whatislove-dev): imporve animation
 performance wd-591 (#633)

---
 .../src/pages/root/libs/components/screen-initial/styles.css  | 1 +
 .../src/pages/root/libs/components/screen-process/styles.css  | 1 +
 .../pages/main/libs/components/easter-egg/easter-egg.js       | 4 ++--
 apps/whatislove-dev/src/styles/blocks/header.css              | 1 +
 apps/whatislove-dev/src/styles/blocks/not-easter-egg.css      | 2 ++
 5 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css
index 71846cf7..81eb3449 100644
--- a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css
+++ b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css
@@ -14,6 +14,7 @@
 	cursor: pointer;
 	background-color: transparent;
 	border: 0;
+	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 
 	&:focus-visible {
diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css
index e3b3495d..6f1accad 100644
--- a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css
+++ b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css
@@ -89,5 +89,6 @@
 	color: var(--color-dark);
 	-webkit-text-stroke: 2px var(--color-light);
 	text-align: center;
+	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 }
diff --git a/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js b/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js
index d4ad194a..36cd31a3 100644
--- a/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js
+++ b/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js
@@ -169,8 +169,8 @@ class EasterEgg {
 		)
 		let { x, y } = getNodeRandomCoords(easterEggButtonWrapperNode)
 
-		easterEggButtonWrapperNode.style.top = `${y}px`
-		easterEggButtonWrapperNode.style.left = `${x}px`
+		easterEggButtonWrapperNode.style.insetBlockStart = `${y}px`
+		easterEggButtonWrapperNode.style.insetInlineStart = `${x}px`
 	}
 
 	/**
diff --git a/apps/whatislove-dev/src/styles/blocks/header.css b/apps/whatislove-dev/src/styles/blocks/header.css
index ae9e3b89..d6c3d2ad 100644
--- a/apps/whatislove-dev/src/styles/blocks/header.css
+++ b/apps/whatislove-dev/src/styles/blocks/header.css
@@ -178,6 +178,7 @@
 .header__menu-item {
 	&[class*="--careers"] {
 		@media (prefers-reduced-motion: no-preference) {
+			will-change: transform;
 			animation: glitch cubic-bezier(0.5, -0.25, 0.75, 1) 6ms infinite;
 		}
 	}
diff --git a/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css b/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css
index 0672f4e6..cd04feb0 100644
--- a/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css
+++ b/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css
@@ -14,6 +14,7 @@
 	margin: 0;
 	overflow: hidden;
 	border-radius: 50%;
+	will-change: inset-block-start, inset-inline-start;
 
 	&::before {
 		position: absolute;
@@ -28,6 +29,7 @@
 		background-color: hsl(var(--color-yellow-100) / 20%);
 		transform: skewX(-25deg);
 		translate: 0 -50%;
+		will-change: inset-inline-start;
 		animation: shine 5s infinite;
 	}