We have a chat app where messages are stored in a repeating group. On page load, the viewport should scroll to the very bottom of the repeating group (showing the last item). When new messages are sent, they should be visible at the bottom.
What we’ve struggled with in the past is that if the chat messages include attachments (e.g. images), when the images load after the chat has been posted, it can create a “jumpy” or “flickering” effect.
We have attempted to solve this with CSS with flex-direction: column-reverse so that the chat is loading bottom-up (which theoretically would then prevent the jumping as new attachments load, since they are loading up the page instead of down the page). But we are still running into a flickering issue when new chat messages are being sent, SPECIFICALLY ON MOBILE.
With our current setup, the effect is visually flawless on laptops and larger screens, but on mobile specifically, it is jumping. It is most obvious if you have sent an image recently, because when you then send a new chat, you briefly see the image flash before it then scrolls to the bottom again.