From 13ecd9459e7a9428bbf90f4f60506d760b96d374 Mon Sep 17 00:00:00 2001
From: lk8888 <1119240633@qq.com>
Date: Fri, 15 Mar 2024 22:05:42 +0800
Subject: [PATCH] Fix the bug of slow emoji rendering on mac chrome

---
 packages/emoji-mart/src/components/Emoji/Emoji.tsx  |  8 +++++++-
 .../emoji-mart/src/components/Picker/Picker.tsx     |  8 +++++++-
 packages/emoji-mart/src/helpers/index.ts            |  1 +
 packages/emoji-mart/src/helpers/user-agent.ts       | 13 +++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 packages/emoji-mart/src/helpers/user-agent.ts

diff --git a/packages/emoji-mart/src/components/Emoji/Emoji.tsx b/packages/emoji-mart/src/components/Emoji/Emoji.tsx
index 9ddd8e684..40862aa8a 100644
--- a/packages/emoji-mart/src/components/Emoji/Emoji.tsx
+++ b/packages/emoji-mart/src/components/Emoji/Emoji.tsx
@@ -1,5 +1,5 @@
 import { Data } from '../../config'
-import { SearchIndex } from '../../helpers'
+import { SearchIndex, UserAgent } from '../../helpers'
 
 export default function Emoji(props) {
   let { id, skin, emoji } = props
@@ -50,6 +50,12 @@ export default function Emoji(props) {
         <span
           style={{
             fontSize: props.size,
+            backfaceVisibility:
+              UserAgent.isMacOs &&
+              UserAgent.chromeVersion > 0 &&
+              UserAgent.chromeVersion < 121
+                ? 'hidden'
+                : undefined,
             fontFamily:
               '"EmojiMart", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"',
           }}
diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index 24cad2e62..63c81b1aa 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -3,7 +3,7 @@ import { Component, createRef } from 'preact'
 
 import { deepEqual, sleep, getEmojiData } from '../../utils'
 import { Data, I18n, init } from '../../config'
-import { SearchIndex, Store, FrequentlyUsed } from '../../helpers'
+import { SearchIndex, Store, FrequentlyUsed, UserAgent } from '../../helpers'
 import Icons from '../../icons'
 
 import { Emoji } from '../Emoji'
@@ -782,6 +782,12 @@ export default class Picker extends Component {
             aria-hidden="true"
             class="background"
             style={{
+              backfaceVisibility:
+                UserAgent.isMacOs &&
+                UserAgent.chromeVersion > 0 &&
+                UserAgent.chromeVersion < 121
+                  ? 'hidden'
+                  : undefined,
               borderRadius: this.props.emojiButtonRadius,
               backgroundColor: this.props.emojiButtonColors
                 ? this.props.emojiButtonColors[
diff --git a/packages/emoji-mart/src/helpers/index.ts b/packages/emoji-mart/src/helpers/index.ts
index 4781bd360..1d1755e20 100644
--- a/packages/emoji-mart/src/helpers/index.ts
+++ b/packages/emoji-mart/src/helpers/index.ts
@@ -3,6 +3,7 @@ export { default as Store } from './store'
 export { default as NativeSupport } from './native-support'
 export { default as FrequentlyUsed } from './frequently-used'
 export { default as SearchIndex } from './search-index'
+export { default as UserAgent } from './user-agent'
 
 export const SafeFlags = [
   'checkered_flag',
diff --git a/packages/emoji-mart/src/helpers/user-agent.ts b/packages/emoji-mart/src/helpers/user-agent.ts
new file mode 100644
index 000000000..d7f64f3a0
--- /dev/null
+++ b/packages/emoji-mart/src/helpers/user-agent.ts
@@ -0,0 +1,13 @@
+const agent: string = window.navigator.userAgent.toLowerCase()
+
+const isMacOs: boolean = agent.indexOf('mac') !== -1
+const isChrome: boolean = agent.indexOf('chrome') > -1
+const chromeVersion: number = isChrome
+  ? parseInt(agent.match(/chrome\/(\d+)/i)[1])
+  : 0
+
+export default {
+  isMacOs,
+  isChrome,
+  chromeVersion,
+}