Sending photos from EIX results in weird vertical padding on EW

[ara4n]

I assume we're sending the wrong dimensions somehow on the thumbnail/image on the metadata sent by EIX? Images from other clients seem to be fine:

n.b. empty space above & below the image.

[ara4n]

this on build 226

[stefanceriu]

@ara4n Can I have some details on the image you're trying to send please? Or maybe the actual image just redacted?

[pixlwave]

As we're unable to reproduce this without the specific image (and I've tried sending photos in all 4 orientations) I'm going to close the issue.

[ara4n]

this is still happening as of build 343, and reproduceable 100%.

Repro steps are:

• Send a typical 4:3 photo from iPhone into an E2EE room.
• View photo in EW/ED
• Observe large vertical padding on the thumbnail in EW/ED:

The JSON for this example is:

{
  "content": {
    "body": "IMG_2532.jpeg",
    "file": {
      "hashes": {
        "sha256": "SDlmec/9JNWTYDIsYxu4o+/iq1ZhzenszQFXu9DCmOU"
      },
      "iv": "...",
      "key": {
        "alg": "A256CTR",
        "ext": true,
        "k": "...",
        "key_ops": [
          "encrypt",
          "decrypt"
        ],
        "kty": "oct"
      },
      "url": "mxc://matrix.org/opjIypnflUZgNczkTyldLtqh",
      "v": "v2"
    },
    "info": {
      "h": 3024,
      "mimetype": "image/jpeg",
      "size": 1761931,
      "thumbnail_file": {
        "hashes": {
          "sha256": "brwoRZNalwQMdj/u/Y4xKJM/Bc9N/3MF6SDcdrH/Q+Q"
        },
        "iv": "...",
        "key": {
          "alg": "A256CTR",
          "ext": true,
          "k": "...",
          "key_ops": [
            "encrypt",
            "decrypt"
          ],
          "kty": "oct"
        },
        "url": "mxc://matrix.org/xoaazsNqXcGnVQSrzVVSvVjn",
        "v": "v2"
      },
      "thumbnail_info": {
        "h": 450,
        "mimetype": "image/jpeg",
        "size": 35015,
        "w": 600
      },
      "w": 4032,
      "xyz.amorgan.blurhash": "KlHdmV,;WC~VoJWVFxOEj["
    },
    "msgtype": "m.image"
  },
  "room_id": "!ZBAyAAUngCCBvXHRkR:matrix.org",
  "type": "m.room.message"
}

Meanwhile, sending precisely the same image from ED, results in this:

(note no spurious vertical spacing).

The JSON for this one is:

{
  "type": "m.room.message",
  "content": {
    "body": "IMG_2532.jpeg",
    "info": {
      "size": 1761931,
      "mimetype": "image/jpeg",
      "thumbnail_info": {
        "w": 800,
        "h": 600,
        "mimetype": "image/jpeg",
        "size": 316578
      },
      "w": 4032,
      "h": 3024,
      "xyz.amorgan.blurhash": "LlHnB4,;WCbH~VoJWVa{FxOEj[jZ",
      "thumbnail_file": {
        "v": "v2",
        "key": {
          "alg": "A256CTR",
          "ext": true,
          "k": "...",
          "key_ops": [
            "encrypt",
            "decrypt"
          ],
          "kty": "oct"
        },
        "iv": "...",
        "hashes": {
          "sha256": "BpbWTXaCV7wVxYDe8QnQaZ8edcNwZlQRZT4/7srzhIs"
        },
        "url": "mxc://matrix.org/xAWDSLhEohdzrptYnpuxAvZs"
      }
    },
    "msgtype": "m.image",
    "file": {
      "v": "v2",
      "key": {
        "alg": "A256CTR",
        "ext": true,
        "k": "...",
        "key_ops": [
          "encrypt",
          "decrypt"
        ],
        "kty": "oct"
      },
      "iv": "...",
      "hashes": {
        "sha256": "l6t8z5CW+KI8Pgr1VZ8z8k/ebcHM8tHcQ/VIkvDlLT0"
      },
      "url": "mxc://matrix.org/mYzSleHjWQnVYzbOqgCHDDvQ"
    }
  }
}

[ara4n]

...so from a quick inspection, the only immediate difference is that the thumbnail sent by EW is 800x600 and the one by EX is 600x450 (which sounds like a thinko; i'd expect it to be 800x600 to match EX).

So I suspect this is mainly a CSS bug in EW where a 600x450 thumbnail is spuriously shown floating within an 800x600 mx_MImageBody_thumbnail_container (despite the container only having a max-width/height of 800x600). However, a quick workaround (which would give better image quality!) would be to fit the thumbnail to 800x600 (good old SVGA) rather than the weird 600x450 that EIX is currently emitting.

[ara4n]

for the sake of completeness, here's the precise
image used in the examples above, although i think it's clear that any large 4:3 image will repro this: