From 0b05ac999769f2b46b90ce821bf57144743bc134 Mon Sep 17 00:00:00 2001 From: WofWca Date: Sun, 22 Dec 2024 21:46:29 +0400 Subject: [PATCH] fix: chat "scrolling up" because of imgs loading This is a follow-up to https://github.com/deltachat/deltachat-desktop/pull/4407. This partially addresses https://github.com/deltachat/deltachat-desktop/issues/4404. The bug was introduced in https://github.com/deltachat/deltachat-desktop/pull/3999. Pior to that we used to have fixed width on quoted images as well. This commmit practically reverts that MR, but also adds `object-fit` and `object-position`, and is now in line with message attachment images. --- CHANGELOG.md | 1 + .../scss/message/_message-attachment.scss | 2 ++ packages/frontend/scss/message/_message.scss | 15 ++++++++++++++- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11f2709f8..70b06daaa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - dev: upgrade react to v18 and react pinch pan zoom to v3 ## Fixed +- fix chat "scrolls up" right after switching (rev 2) #4431 ## [1.50.1] - 2024-12-18 diff --git a/packages/frontend/scss/message/_message-attachment.scss b/packages/frontend/scss/message/_message-attachment.scss index caf780a1d..caccb2ded 100644 --- a/packages/frontend/scss/message/_message-attachment.scss +++ b/packages/frontend/scss/message/_message-attachment.scss @@ -23,6 +23,8 @@ * * for higher values (than 200px) we have to add media queries otherwise * messages with images get strange paddings on small windows + * + * The same goes for `.quoted-image`. */ & > .attachment-content { object-fit: scale-down; diff --git a/packages/frontend/scss/message/_message.scss b/packages/frontend/scss/message/_message.scss index c34f5de40..fe4189d0b 100644 --- a/packages/frontend/scss/message/_message.scss +++ b/packages/frontend/scss/message/_message.scss @@ -470,8 +470,21 @@ } img.quoted-image { + // 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); - // do not set width, to keep the aspect ratio (see https://github.com/deltachat/deltachat-desktop/issues/3931) + width: var(--quote-img-size); + object-fit: scale-down; + object-position: center; + margin-left: 6px; }