There is no aspect-ratio attribute in CSSStyleDeclaration.

There is no aspect-ratio attribute in CSSStyleDeclaration.

I guess the not(src) refers to the thumbhash image where we haven't yet provided the actual decrypted src.

But good point - this is so unobvious, it's worth explaining and maybe adding a comment here

Issue with long images.
Before:

There is an issue when we load encrypted images. When img has no src, we can see white border for a very short time:

Where did you get this border-radius value? I tried to git grep in the codebase, but I wasn't able to find it:

# cd web/chat
# git grep border-radius
chat-input-bar.css:  border-radius: 8px;
chat-thread-list-item-menu.css:  border-radius: 4px;
chat-thread-list.css:  border-radius: 1.68px;
chat-thread-list.css:  border-radius: 15px;
chat-thread-list.css:  border-radius: 5px;
edit-text-message.css:  border-radius: 8px;
edit-text-message.css:  border-radius: 4px;
inline-engagement.css:  border-radius: 16px;
inline-engagement.css:  border-radius: 16px 0 0 16px;
inline-engagement.css:  border-radius: 0 16px 16px 0;
message-tooltip.css:  border-radius: 8px;
message-tooltip.css:  border-radius: 8px;
typeahead-tooltip.css:  border-radius: 8px;
typeahead-tooltip.css:  border-radius: 4px;

I'm also concerned that this CSS selector may inadvertently affect places we don't intend for it to affect. Can you identify all of the locations affected by this selector, and see if this border-radius is appropriate for all of them? For instance, does the span.multimedia > .multimediaImage > img, span.multimedia > .multimediaImage > video selector affect the ChatInputBar or the MultimediaModal?

High-level feedback: it shouldn't be necessary for a reviewer to investigate things like this... as the diff author, you should proactively identify places that might be confusing, and explain with inline comments where things are coming from / how decisions were made

Weird. Is this really a border? If so, shouldn't we hide it by disabling the border, rather than disabling the visibility of the whole img? If we can disable the border, then I suspect the not([src]) part might not be necessary (since we don't want to show a border in any condition)

From here. It looks like it is being set on message wrapper. No wonder that grep didn't catch that (I discovered this value when I was playing with CSS in browser). And yes, it affects ChatInputBar uploads, my bad, could have mentioned this. Probably that's why I used inline border-radius rather than using it in media.css. The main motivation to use inline border-radius was, as I wrote before, to round long images which render with small height (less than 50px). Because we set min-height: 50px here, images, as well as videos, with rendered height < 50px could not be rendered with borders. I suggest to return to inline declaration of border-radius.

If border: 0/none or outline: 0/none worked, I would use it. It's the default "special" border that appears when you use an img element with an a src attribute set to something that doesn't exist (or you don't use src at all). We could also set some blank image as source to hide this border, but it would be the same as hiding this tag with CSS. You can read more here.

Another resource which suggest using something similar to display: none is here.

1. We should avoid inline styles, and instead favor the application of specific classes. Instead of an inline style, you should define a new class that sets the border-radius that you want, and conditionally apply that class.
2. Can you explain more why we need the border-radius to be applied here for long images? I don't understand what the borderRadius here works for most images, but doesn't work for long images. Is there some special behavior that min-height has that disables border-radius somehow?

Thanks for explaining!! This is weird, but your links helped me understand why it's necessary

1. Remove border-radius from img tag and don't care right now for this corner case.
2. Round every corner of the image (set border-radius: 16px to img tag) only when rendered image height is less than min-height: 50px of message container.
3. Inherit border settings for img tag and remove min-height: 50px. This however creates new issue: when image has extremely small rendered height, it will be hard to click on it and open multimedia modal :)

I feel like this issue fix should be a separate diff. Below I've attached some visualisations how second and third option could look like:
Second option: