Image rendering on smaller viewports causes overflow issues.

[tylergeorges]

Rendering messages with

• Attachment images
• Emotes
• A name with a Bot/Server badge

all cause overflow issues on mobile devices when rendering with lists such as React Virtuoso, which causes blank spaces and jumping.

I'm sure its the images causing this, because when tested with channels that only have text content and no image attachments, it renders fine on mobile.

Video of issue:
https://github.com/widgetbot-io/message-renderer/assets/94828874/a6bffae4-96fb-45aa-836f-20f5a0e25147

[tylergeorges]

Possible solution:

Scale attachment image sizes by a factor, and the factor is determined by the viewport

[inokawa]

Hello, I'm author of https://github.com/inokawa/virtua .
It has better jump suppression logic than react-virtuoso for iOS browsers and for resizes outside of viewport.
Check it out if you are interested in it.