[Regression] Attachment sizes do not respect aspect ratios

[wreiske]

Description:

The new attachment embeds do not respect the aspect ratio of images.

Steps to reproduce:

1. Upload an image that is taller than it is wide
2. Boom

Expected behavior:

Actual behavior:

Server Setup Information:

• Version of Rocket.Chat Server: 3.11.0
• Operating System:
• Deployment Method:
• Number of Running Instances:
• DB Replicaset Oplog:
• NodeJS Version:
• MongoDB Version:

Additional context

Changing width to max-width and height to max-height helps!

Rocket.Chat/client/components/Message/Attachments/context/AttachmentContext.tsx

Line 16 in 9b33bbe

dimensions: {

Rocket.Chat/client/components/Message/Attachments/providers/AttachmentProvider.tsx

Line 20 in 0872682

dimensions: {

Rocket.Chat/client/components/Message/Attachments/Files/ImageAttachment.tsx

Line 26 in fea272a

image_dimensions: imageDimensions = {

[wreiske]

Also, why is everything !important ??? I can't fix anything locally with custom CSS when everything is important :(.

[ggazzo]

hey @wreiske about the !important its a generated css, and we should not trust on these classes, they can (and will) change, and you cannot predict.
your intention, was kinda exactly that: do not encourage customizations by selectors or specificity (because they can change very easily). but using vars .. of course its not all customizations that will be possible, but it was more or less your objective.

more than that, for some time we had some issues by the generated order being 'unordered' so we used important to solve. nowadays maybe we could remove the important but still you should not use the rcx-css-something =/

btw I will provide a properly fix to that ( the image sizes)

[yash-rajpal]

This is very similar to issue #20307 . I looked deeply into this issue, but wasn't able to fix it. I will report my findings as that maybe useful to solve this issue.
For example look at this screenshot -

The size of this image is - height: 4000 pixels and width is 1846 pixels as seen in screenshot below of image properties-

But when this image is rendered the height and width is interchanged which results in weird aspect ratio. I logged the imageDimensions value in ImageAttachment.tsx and got the interchanged value -

Also inverted values are saved in database.

Also, one more thing to not is, when I try to upload this Image, image will be shown as inverted in filePicker, I don't know if this has to do something with this issue. This can be seen in screenshot below -

To debug this issue I looked into FileUpload of client and server, sendFileMessage method from sendFileMessage.js file, rooms.upload api call in rooms.js (here sendFileMessage method is called to save file to db). After looking into all these files and related files to these I am still not able to fix this issue.

It would be very helpful @ggazzo if you can guide me in right direction for this issue.
Thanks :)

[tiagoevanp]

@yash-rajpal Can you send me the photo that causes that problem for some tests? I can't reproduce the issue...

[wreiske]

@tiagoevanp I have been trying to reproduce this issue on my mac and haven't been able to. The initial issue I reported while using the Windows client.

Here's a way I was able to reproduce it on a mac using a gif image.

Example file:

[yash-rajpal]

@tiagoevanp I just checked again, now this image is uploaded correctly and dimensions of height and width are assigned correctly.
I think #20531 Pull request introduced the orientation check and assigned the values correctly so, I think issue is resolved.

[pierre-lehnen-rc]

Can confirm the error is still present, at least while previewing on the webclient. The image itself doesn't seem to be changed, it's only displayed with the wrong size on the webclient preview.

[tiagoevanp]

As I see, the problem persists with gif images... Thanks for reply, I will find a solution for that asap.

[FrankDaze]

I still have the same problem with a jpg in Rocket.Chat V4.4

[wreiske]

Example 1 with giphy

Example 2 with image embeds from API

[D34DC3N73R]

I have this same issue with the tenor app as well with rocket chat 4.5.0

[thrakks]

Still Broken as of 4.8.0
Server Version:

Expected Ratio:

Actual Ratio:

[D34DC3N73R]

Still broken in RC 5.0

expected ratio

original gif

server info

[D34DC3N73R]

It's not perfect, but this css helps out a ton while waiting for a fix

.gallery-item {
    height: auto;
}

picture[class*="rcx-css"]  {
  height: auto !important;
}

##examples
wide

tall

gif

(original gif)

[thrakks]

.gallery-item {
    height: auto;
}

picture[class*="rcx-css"]  {
  height: auto !important;
}

@D34DC3N73R Yep, that fixed it for me well enough. You're my hero!

[wreiske]

#26838

[wreiske]

This is even worse in 6.0.0. Notice how small the preview images are?

[D34DC3N73R]

This is the latest that I'm using with RC 6.1.3. It gets rid of the space above and below gifs wider than a 1:1 aspect ratio.

.gallery-item {
    height: auto;
}

picture[class*="rcx-css"]  {
  height: auto !important;
  border-width: 0 !important;
  background: transparent !important;
  position: relative !important;
}

div[class*="rcx-css"]  {
  padding-block-start: inherit !important;
  overflow: visible !important;
}