Exclude Safari emoji fix above 1.25x zoom

Author: CL-Jeremy

web_src/js/index.js

@@ -25,7 +25,7 @@ import {initNotificationsTable, initNotificationCount} from './features/notifica
 import {initStopwatch} from './features/stopwatch.js';
 import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {svg, svgs} from './svg.js';
-import {stripTags} from './utils.js';
+import {stripTags, mqBinarySearch} from './utils.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -2407,6 +2407,19 @@ $(document).ready(async () => {
       .attr('title', '');
   });
 
+  // Undo Safari emoji glitch fix at high enough zoom levels
+  if (navigator.userAgent.match('Safari')) {
+    $(window).resize(() => {
+      const px = mqBinarySearch('width', 0, 4096, 1, 'px');
+      const em = mqBinarySearch('width', 0, 1024, 0.01, 'em');
+      if (em * 16 * 1.25 - px <= -1) {
+        $('body').addClass('safari-above125');
+      } else {
+        $('body').removeClass('safari-above125');
+      }
+    });
+  }
+
   // Semantic UI modules.
   $('.dropdown:not(.custom)').dropdown({
     fullTextSearch: 'exact'

web_src/js/utils.js

@@ -28,3 +28,16 @@ export function uniq(arr) {
 export function stripTags(text) {
   return text.replace(/<[^>]*>?/gm, '');
 }
+
+// searches the inclusive range [minValue, maxValue].
+// credits: https://matthiasott.com/notes/write-your-media-queries-in-pixels-not-ems
+export function mqBinarySearch(feature, minValue, maxValue, step, unit) {
+  if (maxValue - minValue < step) {
+    return minValue;
+  }
+  const mid = Math.ceil((minValue + maxValue) / 2 / step) * step;
+  if (matchMedia(`screen and (min-${feature}:${mid}${unit})`).matches) {
+    return mqBinarySearch(feature, mid, maxValue, step, unit); // feature is >= mid
+  }
+  return mqBinarySearch(feature, minValue, mid - step, step, unit); // feature is < mid
+}

web_src/less/_base.less

@@ -1866,7 +1866,7 @@ table th[data-sortt-desc] {
   vertical-align: -.075em;
 
   @supports (-webkit-hyphens:none) {
-    & {
+    body:not(.safari-above125) & {
       font-size: inherit;
       vertical-align: inherit;
       img {