From 708d0ed08c474c26674acba3a8e1aaede285b05f Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Wed, 12 Oct 2022 09:41:51 -0700
Subject: [PATCH] Fix usage of will-change

---
 src/components/Folder.vue   | 3 ---
 src/components/Photo.vue    | 8 ++------
 src/components/Tag.vue      | 3 ---
 src/components/Timeline.vue | 1 +
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index 034b8b1c..cd07e8f7 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -197,10 +197,7 @@ export default class Folder extends Mixins(GlobalMixin) {
             width: 100%;
             height: 100%;
             filter: brightness(50%);
-
             transition: filter 0.2s ease-in-out;
-            will-change: filter;
-            transform: translateZ(0);
 
             &.p-loading, &.p-load-fail {
                 display: none;
diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index 17cb5bdc..2a743709 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -211,9 +211,6 @@ export default class Photo extends Mixins(GlobalMixin) {
 <style lang="scss" scoped>
 /* Container and selection */
 .p-outer {
-    will-change: transform, opacity;
-    transform: translateZ(0);
-
     &.leaving {
         transition: all 0.2s ease-in;
         transform: scale(0.9);
@@ -263,12 +260,11 @@ export default class Photo extends Mixins(GlobalMixin) {
 /* Actual image */
 div.img-outer {
     padding: 2px;
-    will-change: padding;
-    transition: padding 0.1s ease;
+    transition: transform 0.1s ease;
     background-clip: content-box, padding-box;
     background-color: var(--color-background-dark);
 
-    .selected > & { padding: 5%; }
+    .selected > & { transform: scale(0.9); }
 
     > img {
         background-clip: content-box;
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index a65a3fca..c51ea2b4 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -231,10 +231,7 @@ export default class Tag extends Mixins(GlobalMixin) {
             width: 100%;
             filter: brightness(60%);
             cursor: pointer;
-
             transition: filter 0.2s ease-in-out;
-            will-change: filter;
-            transform: translateZ(0);
 
             &.p-loading, &.p-load-fail {
                 display: none;
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 9dc3aa7a..0a95d99e 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1523,6 +1523,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
         background-color: var(--color-primary);
         min-width: 100%;
         min-height: 1.5px;
+        will-change: transform;
 
         &.st {
             font-size: 0.75em;