message-feed: Improve scroll perf by removing scaling on emojis.

This removes scaling from the emojis by changing the background size to
a lower value and then allowing for the widths and heights of the
emojis to be proportionally smaller.

The transform: scale property would cause many more repaints in Chrome
and other browsers than should have been necessary which would render
messages above and below the feed light grey boxes that would
momentarily flash as blank before filling with content.

Modified by tabbott to use a percentage in the background-size.

Fixes #4660.

static/styles/reactions.css

@@ -24,16 +24,15 @@
     background-color: #eef7fa !important;
 }
 
-.message_reactions .message_reaction .emoji {
+.message_reaction div.emoji {
     display: inline-block;
     vertical-align: top;
-    top: -3px;
-    margin: 0px;
+    top: 0px;
+    margin: 1px 3px;
 
-    transform: scale(0.70);
-    transform-origin: 50% 50%;
-    -moz-transform: scale(0.70);
-    -moz-transform-origin: 50% 50%;
+    height: 17px;
+    width: 17px;
+    position: relative;
 }
 
 .message_reactions .message_reaction_count {

tools/setup/emoji/build_emoji

@@ -60,9 +60,9 @@ span.emoji
 {
     display: inline-block;
     background-image: url('sheet_%(emojiset)s_32.png');
-    -webkit-background-size: 1025px 1025px;
-    -moz-background-size: 1025px 1025px;
-    background-size: 1025px 1025px;
+    -webkit-background-size: 4100%%;
+    -moz-background-size: 4100%%;
+    background-size: 4100%%;
     background-repeat: no-repeat;
 
     /* Hide the text. */

version.py

@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.5.1+git"
-PROVISION_VERSION = '4.23'
+PROVISION_VERSION = '4.24'