fix: fix firefox double emoji

nolanlawson · Sep 9, 2024 · 1d1da65 · 1d1da65
1 parent 3c9042b
commit 1d1da65
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/picker/components/Picker/PickerTemplate.js b/src/picker/components/Picker/PickerTemplate.js
@@ -195,10 +195,18 @@ export function render (container, state, helpers, events, actions, refs, abortS
                 }
           </div>
             <!--
-              Improve performance in custom emoji by using \`content-visibility: auto\` on every category
-              The \`--num-rows\` is used in these calculations to contain the intrinsic height
+              Improve performance in custom emoji by using \`content-visibility: auto\` on emoji categories.
+              The \`--num-rows\` is used in these calculations to contain the intrinsic height.
+              Note that we only enable this for:
+                - categories beyond the first one
+                - non-search mode 
+                - custom emoji group (id -1)
+              We only need the optimization for large lists of custom emoji (issue #444). Enabling it for non-custom
+              emoji causes a bug in Firefox (issue #453). We also don't do it for the first category because this 
+              causes blank emoji rendering when switching tabs or searching and un-searching. (Plus it's kind of 
+              pointless to do \`content-visibility: auto\` for the first category, since it's immediately shown.)
             -->
-          <div class="emoji-menu hide-offscreen"
+          <div class="emoji-menu ${i !== 0 && !state.searchMode && state.currentGroup.id === -1 ? 'visibility-auto' : ''}"
                style=${`--num-rows: ${Math.ceil(emojiWithCategory.emojis.length / state.numColumns)}`}
                data-action="updateOnIntersection"
                role="${state.searchMode ? 'listbox' : 'menu'}"
@@ -216,7 +224,7 @@ export function render (container, state, helpers, events, actions, refs, abortS
           </div>
         </div>
         <!-- This on:click is a delegated click listener -->
-        <div class="favorites emoji-menu ${state.message ? 'gone' : ''}"
+        <div class="favorites onscreen emoji-menu ${state.message ? 'gone' : ''}"
              role="menu"
              aria-label="${state.i18n.favoritesLabel}"
              data-on-click="onEmojiClick">

diff --git a/src/picker/styles/picker.scss b/src/picker/styles/picker.scss
@@ -71,7 +71,7 @@ $skintoneZIndex3: 3;
   width: 100%;
 
   // Improve performance in custom emoji by using `content-visibility: auto` on every category
-  &.hide-offscreen {
+  &.visibility-auto {
     content-visibility: auto;
     contain-intrinsic-size:
       // width
@@ -123,16 +123,10 @@ button.emoji,
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
-
   // Don't eagerly download the images while the custom emoji is offscreen
-  .hide-offscreen & {
-    background-image: none;
-  }
+  background-image: none;
 
-  // Note we have to handle the case of the favorites bar, which has no `.onscreen` or `.hide-offscreen` in its
-  // ancestor tree. The specificity/ordering here is deliberate.
-  // We could use `.hide-offscreen:not(.onscreen) &` above instead, but avoiding `:not()` here for selector perf.
-  &, .onscreen & {
+  .onscreen & {
     background-image: var(--custom-emoji-background);
   }
 }