From 42ce620cfe9965e572b4f3d4d1770f48db137076 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Sun, 20 Jun 2021 21:26:41 +0200
Subject: [PATCH] Added some `will-change` to prevent annoying text shift
---
client/src/components/forms/ProjectForm/project-form.scss | 1 +
client/src/components/helpers/Filter/filter.scss | 1 +
client/src/components/ui/Button/button.scss | 1 +
client/src/components/ui/Project/project.scss | 1 +
client/src/components/ui/ProjectSlide/project-slide.scss | 1 +
client/src/components/ui/Task/task.scss | 1 +
client/src/pages/Landing/partials/Features/features.scss | 1 +
7 files changed, 7 insertions(+)
diff --git a/client/src/components/forms/ProjectForm/project-form.scss b/client/src/components/forms/ProjectForm/project-form.scss
index fe16091..52b8dcf 100644
--- a/client/src/components/forms/ProjectForm/project-form.scss
+++ b/client/src/components/forms/ProjectForm/project-form.scss
@@ -22,6 +22,7 @@
position: relative;
filter: saturate(50%);
transform: scale(90%);
+ will-change: transform;
@include mx.breakpoint(small) {
width: calc(100% / 5 - 10px);
diff --git a/client/src/components/helpers/Filter/filter.scss b/client/src/components/helpers/Filter/filter.scss
index c111333..3d7d905 100644
--- a/client/src/components/helpers/Filter/filter.scss
+++ b/client/src/components/helpers/Filter/filter.scss
@@ -50,6 +50,7 @@
opacity: 0.5;
transform: scale(90%);
user-select: none;
+ will-change: transform;
.tag {
margin: 0;
diff --git a/client/src/components/ui/Button/button.scss b/client/src/components/ui/Button/button.scss
index e35cd0e..e333918 100644
--- a/client/src/components/ui/Button/button.scss
+++ b/client/src/components/ui/Button/button.scss
@@ -15,6 +15,7 @@
appearance: none;
border: none;
outline: none;
+ will-change: transform;
&.expanded {
width: 100%;
diff --git a/client/src/components/ui/Project/project.scss b/client/src/components/ui/Project/project.scss
index eda8ddb..6553774 100644
--- a/client/src/components/ui/Project/project.scss
+++ b/client/src/components/ui/Project/project.scss
@@ -10,6 +10,7 @@
width: 160px;
color: s.$text;
height: 160px;
+ will-change: transform;
&:hover,
&:focus {
diff --git a/client/src/components/ui/ProjectSlide/project-slide.scss b/client/src/components/ui/ProjectSlide/project-slide.scss
index 24b84f0..17f7e9d 100644
--- a/client/src/components/ui/ProjectSlide/project-slide.scss
+++ b/client/src/components/ui/ProjectSlide/project-slide.scss
@@ -11,6 +11,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
+ will-change: transform;
&:hover ,
&:focus {
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
index e39600f..a7b4b81 100644
--- a/client/src/components/ui/Task/task.scss
+++ b/client/src/components/ui/Task/task.scss
@@ -12,6 +12,7 @@
color: s.$text;
font-weight: s.$weight-regular;
position: relative;
+ will-change: transform;
&:hover,
&:focus {
diff --git a/client/src/pages/Landing/partials/Features/features.scss b/client/src/pages/Landing/partials/Features/features.scss
index 781295a..f46b65b 100644
--- a/client/src/pages/Landing/partials/Features/features.scss
+++ b/client/src/pages/Landing/partials/Features/features.scss
@@ -30,6 +30,7 @@
padding: 30px;
border-radius: 25px;
margin: 20px;
+ will-change: transform;
@include mx.breakpoint(medium) {
padding: 40px;
--
GitLab