Use "transform: scale" to resize emoticons, and "zoom" when supported (#29276) (#29885)

mattermost-build · web-flow · commit e2119fc9aa52 · 2025-01-16T14:18:31.000+02:00
Automatic Merge
diff --git a/webapp/channels/build/emoji/make_emojis.mjs b/webapp/channels/build/emoji/make_emojis.mjs
@@ -443,9 +443,14 @@ const cssRules = `
     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 {
@@ -456,7 +461,7 @@ const cssRules = `
     border-radius: 18px;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
 }
 
 .emojisprite-loading {
@@ -468,7 +473,16 @@ const cssRules = `
     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
@@ -8,9 +8,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 {
@@ -21,7 +26,7 @@
     background-repeat: no-repeat;
     cursor: pointer;
     -moz-transform: scale(0.35);
-    zoom: 0.35;
+    transform: scale(0.35);
 }
 
 .emojisprite-loading {
@@ -33,7 +38,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
@@ -546,12 +546,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;
+                }
             }
         }
     }
