add prop to ListImpl for disabling `content-visibility` style (#4236)

* add prop to `ListImpl` for `content-visibility` style

* change to `disableContentVisibility`

* lint

* tweaks

* Keep the fix more general

* Clarify ambiguity

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/screens/Messages/Conversation/MessagesList.tsx

@@ -328,6 +328,9 @@ export function MessagesList({
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           containWeb={true}
+          // Prevents wrong position in Firefox when sending a message
+          // as well as scroll getting stuck on Chome when scrolling upwards.
+          disableContentVisibility={true}
           disableVirtualization={true}
           style={animatedListStyle}
           // The extra two items account for the header and the footer components

src/view/com/util/List.tsx

@@ -26,6 +26,8 @@ export type ListProps<ItemT> = Omit<
   onItemSeen?: (item: ItemT) => void
   containWeb?: boolean
   sideBorders?: boolean
+  // Web only prop to disable a perf optimization (which would otherwise be on).
+  disableContentVisibility?: boolean
 }
 export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null>
 

src/view/com/util/List.web.tsx

@@ -5,7 +5,7 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/rean
 import {batchedUpdates} from '#/lib/batchedUpdates'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {useScrollHandlers} from '#/lib/ScrollContext'
-import {isFirefox, isSafari} from 'lib/browser'
+import {isSafari} from 'lib/browser'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {addStyle} from 'lib/styles'
@@ -25,6 +25,7 @@ export type ListProps<ItemT> = Omit<
   desktopFixedHeight: any // TODO: Better types.
   containWeb?: boolean
   sideBorders?: boolean
+  disableContentVisibility?: boolean
 }
 export type ListRef = React.MutableRefObject<any | null> // TODO: Better types.
 
@@ -56,6 +57,7 @@ function ListImpl<ItemT>(
     extraData,
     style,
     sideBorders = true,
+    disableContentVisibility,
     ...props
   }: ListProps<ItemT>,
   ref: React.Ref<ListMethods>,
@@ -339,6 +341,7 @@ function ListImpl<ItemT>(
               renderItem={renderItem}
               extraData={extraData}
               onItemSeen={onItemSeen}
+              disableContentVisibility={disableContentVisibility}
             />
           )
         })}
@@ -387,6 +390,7 @@ let Row = function RowImpl<ItemT>({
   renderItem,
   extraData: _unused,
   onItemSeen,
+  disableContentVisibility,
 }: {
   item: ItemT
   index: number
@@ -396,6 +400,7 @@ let Row = function RowImpl<ItemT>({
     | ((data: {index: number; item: any; separators: any}) => React.ReactNode)
   extraData: any
   onItemSeen: ((item: any) => void) | undefined
+  disableContentVisibility?: boolean
 }): React.ReactNode {
   const rowRef = React.useRef(null)
   const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined)
@@ -444,8 +449,15 @@ let Row = function RowImpl<ItemT>({
     return null
   }
 
+  const shouldDisableContentVisibility = disableContentVisibility || isSafari
   return (
-    <View style={styles.row} ref={rowRef}>
+    <View
+      style={
+        shouldDisableContentVisibility
+          ? undefined
+          : styles.contentVisibilityAuto
+      }
+      ref={rowRef}>
       {renderItem({item, index, separators: null as any})}
     </View>
   )
@@ -516,9 +528,9 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  row: {
+  contentVisibilityAuto: {
     // @ts-ignore web only
-    contentVisibility: isSafari || isFirefox ? '' : 'auto', // Safari support for this is buggy.
+    contentVisibility: 'auto',
   },
   minHeightViewport: {
     // @ts-ignore web only