diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index bee7f6cd..583c4085 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/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 diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index c271481a..22d09491 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -26,6 +26,8 @@ export type ListProps = 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 diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 9d8ddeda..d4bd1b00 100644 --- a/src/view/com/util/List.web.tsx +++ b/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 = Omit< desktopFixedHeight: any // TODO: Better types. containWeb?: boolean sideBorders?: boolean + disableContentVisibility?: boolean } export type ListRef = React.MutableRefObject // TODO: Better types. @@ -56,6 +57,7 @@ function ListImpl( extraData, style, sideBorders = true, + disableContentVisibility, ...props }: ListProps, ref: React.Ref, @@ -339,6 +341,7 @@ function ListImpl( renderItem={renderItem} extraData={extraData} onItemSeen={onItemSeen} + disableContentVisibility={disableContentVisibility} /> ) })} @@ -387,6 +390,7 @@ let Row = function RowImpl({ renderItem, extraData: _unused, onItemSeen, + disableContentVisibility, }: { item: ItemT index: number @@ -396,6 +400,7 @@ let Row = function RowImpl({ | ((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(undefined) @@ -444,8 +449,15 @@ let Row = function RowImpl({ return null } + const shouldDisableContentVisibility = disableContentVisibility || isSafari return ( - + {renderItem({item, index, separators: null as any})} ) @@ -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