chat "scrolls up" right after switching to it, because images load and shift height

[WofWca]

• Operating System (Linux/Mac/Windows/iOS/Android): Windows
• Delta Chat Version: 1.48.0
• Expected behavior: Chat loads with the last message at the very bottom
• Actual behavior: First the chat is scrolled all the way to the bottom, but after a few milliseconds "scrolls up"
• Steps to reproduce the problem:
  1. Open a chat where one of the last messages is an image
• Screenshots:
• Logs:

@maxphilippov suggested what is likely to be the solution here #4315 (comment), with an extra comment from me #4315 (comment).

Update: the issue per se has been fixed in #4407, which sort of reverts the MR that introduced it (#4315), but we might want to come back to dynamic image sizes.

[WofWca]

Turns out this was introduced recently, in #4315

[WofWca]

Ok, looks like setting either height attribute or CSS height: to intrinsic size, as I tried in #4406 doesn't work, see #4406 (comment).

I think we need a different approach, perhaps utilizing the aspect-ratio CSS property and turning the container into a flex container, and removing object-fit.

Completely disregarding actual message size and only looking at its aspect ratio is probably not the way to go for tiny images.
Maybe we can set max-height and max-width to the intrinsic size.

We should think in terms of "we need to set the height and width of the image, and not rely on the browser to figure out the dimensions based on the image's intrinsic size.

Also, looking at Signal's implementation could be worth it.

[nicodh]

Is this still an issue with current main for anyone?
@Jikstra ?

[WofWca]

Bruh. It's still reproducible on 1.51.0, with quoted images. I don't understand how, but somehow upon the initial paint the quote text takes 2 lines, and on the next paint it takes 3 lines:

Here is what it looks like when the image hasn't loaded:

For me it's easier to reproduce when the dev tools are open.

We fixed the width and height, WTF?!

deltachat-desktop/packages/frontend/scss/message/_message.scss

Lines 498 to 509 in 1907a4f

	// Remember that width and height need to be set prior to the image
	// getting actually loaded by the browser, to avoid content shifts.
	// Same goes for messages' `.attachment-content`.
	// See https://github.com/deltachat/deltachat-desktop/issues/4404.
	//
	// Setting just the height is not enough, because there might be text
	// displayed beside the image, which might wrap and thus change height.
	//
	// In addition, really short and wide images could make the message
	// overflow the chat container, for non-self-sent messages at least.
	height: var(--quote-img-size);
	width: var(--quote-img-size);