From b03409202e1e16fdcaae9ef706f20beaa2b24d17 Mon Sep 17 00:00:00 2001
From: Michele Lo Russo <michele9.6.89@gmail.com>
Date: Fri, 6 Dec 2024 00:22:55 +0100
Subject: [PATCH] Use "transform: scale" to resize emoticons, and "zoom" when
 supported (#29276)

---
 webapp/channels/build/emoji/make_emojis.mjs   | 22 +++++++++++++++----
 .../src/sass/components/_emojisprite.scss     | 22 +++++++++++++++----
 .../src/sass/components/_emoticons.scss       | 17 +++++++++++---
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/webapp/channels/build/emoji/make_emojis.mjs b/webapp/channels/build/emoji/make_emojis.mjs
index 85f65989bda..e961a01c392 100755
--- a/webapp/channels/build/emoji/make_emojis.mjs
+++ b/webapp/channels/build/emoji/make_emojis.mjs
@@ -440,9 +440,14 @@ const cssRules = `.emojisprite-preview {
     background-repeat: no-repeat;
     cursor: pointer;
     -moz-transform: scale(0.5);
+    transform: scale(0.5);
     transform-origin: 0 0;
-    // Using zoom for now as it results in less blurry emojis on Chrome - MM-34178
-    zoom: 0.5;
+
+    @supports (zoom: 0.5) {
+        -moz-transform: none;
+        transform: none;
+        zoom: 0.5;
+    }
 }
 
 .emojisprite {
@@ -453,7 +458,7 @@ const cssRules = `.emojisprite-preview {
     border-radius: 18px;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
 }
 
 .emojisprite-loading {
@@ -465,7 +470,16 @@ const cssRules = `.emojisprite-preview {
     border-radius: 18px;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
+}
+
+@supports (zoom: 0.35) {
+    .emojisprite,
+    .emojisprite-loading {
+        -moz-transform: none;
+        transform: none;
+        zoom: 0.35;
+    }
 }
 
 ${cssCats.join('\n')}
diff --git a/webapp/channels/src/sass/components/_emojisprite.scss b/webapp/channels/src/sass/components/_emojisprite.scss
index 483efaa469f..eaf8f7a38bb 100644
--- a/webapp/channels/src/sass/components/_emojisprite.scss
+++ b/webapp/channels/src/sass/components/_emojisprite.scss
@@ -5,9 +5,14 @@
     background-repeat: no-repeat;
     cursor: pointer;
     -moz-transform: scale(0.5);
+    transform: scale(0.5);
     transform-origin: 0 0;
-    // Using zoom for now as it results in less blurry emojis on Chrome - MM-34178
-    zoom: 0.5;
+
+    @supports (zoom: 0.5) {
+        -moz-transform: none;
+        transform: none;
+        zoom: 0.5;
+    }
 }
 
 .emojisprite {
@@ -18,7 +23,7 @@
     background-repeat: no-repeat;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
 }
 
 .emojisprite-loading {
@@ -30,7 +35,16 @@
     background-repeat: no-repeat;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
+}
+
+@supports (zoom: 0.35) {
+    .emojisprite,
+    .emojisprite-loading {
+        -moz-transform: none;
+        transform: none;
+        zoom: 0.35;
+    }
 }
 
 .emoji-category-recent { background-image: url('images/emoji-sheets/apple-sheet.png'); }
diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss
index 860496f8152..2f51ac09766 100644
--- a/webapp/channels/src/sass/components/_emoticons.scss
+++ b/webapp/channels/src/sass/components/_emoticons.scss
@@ -548,12 +548,23 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
 
         img {
             -moz-transform: scale(0.45);
-            zoom: 0.45;
+            transform: scale(0.45);
+
+            @supports (zoom: 0.45) {
+                -moz-transform: none;
+                transform: none;
+                zoom: 0.45;
+            }
 
             &.emoji-category--custom {
                 -moz-transform: scale(1);
-                transform: scale(1.25);
-                zoom: 1;
+                transform: scale(1);
+
+                @supports (zoom: 1) {
+                    -moz-transform: none;
+                    transform: none;
+                    zoom: 1;
+                }
             }
         }
     }