SVGs break timeline layout

[kittykat]

Steps to reproduce

1. (With message bubbles enabled) attach an SVG
2. Post a message

Outcome

What did you expect?

See attached file in timeline

What happened instead?

The second message covers up the SVG attachment

Operating system

No response

Browser information

Chromium 96.0.4664.45 (Official Build) Arch Linux (64-bit)

URL for webapp

develop.element.io

Application version

Element version: b0abbfa-react-38e5e94ee410-js-2206b80e65aa Olm version: 3.2.3

Homeserver

No response

Will you send logs?

No

[HarHarLinks]

there are some more svg issues, e.g. #18526

one issue seems to be that in contrast to pixel based images, element/electron/chromium doesn't seem to have a proper sense of scale for vector images.

i.e. in this case i suspect the svg "is very very small" and for some reason the usual scaling mechanisms don't work.

[justjanne]

I’ve created a few test files for this, with intrinsic sizes of 200×200, 2×2, and 0×0. I can reliably reproduce the issue with these files.

• black circle
• black circle (sizeless)
• black circle (tiny)
• white circle
• white circle (sizeless)
• white circle (tiny)

[justjanne]

It’s not just tiny SVGs, nor is it just with message bubbles. From my testing, all tiny images cause this, in all layouts:

• 
• 
• 
•