fix(missive#872): When you slide the scroll bar very fast, the icon b…

…elow cannot be rendered.

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,7 @@ 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"',
  }}

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,7 @@ 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[

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',

packages/emoji-mart/src/helpers/user-agent.ts

@@ -0,0 +1,11 @@
+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{2})/)[1]) : 0
+
+export default {
+ isMacOs,
+ isChrome,
+ chromeVersion,
+}