stream-chat-react icon indicating copy to clipboard operation
stream-chat-react copied to clipboard

Published 20 hours ago • verified publisher icon GetStream

bug: VirtualizedMessageList breaks "position: fixed" element inside the scroller

Open arzamax opened this issue 2 years ago • 3 comments

Describe the bug

react-virtuoso commit added "will-change: transform" style property to the list scroller and created new stack context for inner elements (MDN). Attachment gallery modal has "position: absolute" behavior and renders regarding the list now.

Screenshots

Package version

  • stream-chat-react:

arzamax avatar Jun 27 '22 10:06 arzamax

@arzamax thanks for reporting that. The will-change combats a problem introduced in Chrome 102, but it indeed leads to the unintended consequences of the gallery not working as expected.

petyosi avatar Jun 27 '22 11:06 petyosi

@arzamax as a temporary measure, you can remove the will-change setting:

<VirtualizedMessageList additionalVirtuosoProps={{ style: { willChange: 'unset' }, increaseViewportBy: { top: 400, bottom: 200 } }} />

Unfortunately, I am still unable to reproduce (and, potentially, find alternative cures) for this problem: https://github.com/petyosi/react-virtuoso/issues/675.

petyosi avatar Jun 27 '22 12:06 petyosi

Managed to reproduce in Browserstack. The good news is that this seems fixed in Chrome 103. But it's still broken in Edge 102.

petyosi avatar Jun 27 '22 18:06 petyosi