From 3f8b90b72d405f9d1c17dabd19015b641d3e2dac 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 + packages/frontend/scss/message/_message-attachment.scss | 2 ++ packages/frontend/scss/message/_message.scss | 9 ++++++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11f2709f8..6b30f973b 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) # ## [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..51e140e16 100644 --- a/packages/frontend/scss/message/_message.scss +++ b/packages/frontend/scss/message/_message.scss @@ -470,8 +470,15 @@ } 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 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; }