1953072 - HTML signature format displays wrongly (involving oversized images)

Status: RESOLVED FIXED

(Thunderbird :: Message Reader UI, defect)

Description

[carlos]

Attachment: HTML signature wrong.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Steps to reproduce:

When I receive a forwarded message from an email address with a specific HTML signature, I open the message and see the message and signature.

Actual results:

Some symbols from that signature are shown in enormous sizes, so the signature is very poorly rendered and hence, the rest of the signature is moved by the huge symbol and everything is broken.

Expected results:

The signature should display correctly and as expected according to the HTML code, because the signature displays correctly in every other email client.

Comment 1

[Anje]

Did you use Thunderbird 'Write' new message window to create the HTML signature file?
Can you upload a copy the actual HTML file ?
The image used would be an image file on your computer - please tell us the size in pixels of the original image used in the signature ?

Comment 2

[carlos]

(In reply to Anje from comment #1)

Did you use Thunderbird 'Write' new message window to create the HTML signature file?
Can you upload a copy the actual HTML file ?
The image used would be an image file on your computer - please tell us the size in pixels of the original image used in the signature ?

For my signature, I added it on Account configuration, on the section Signature text and I have the option Use HTML marked. That's how I've used it for many many years. The actual code used for this image has not been altered nor modified during all these years. Simply after a regular update from Thunderbird, that logo started to show in that huge size.

The images are stored on my webpage, but as I previously said, it's been the same code and the same size for many years. Below is the actual code for that specific logo (there are more things in td style, that's why it's not closed in this example):

<td style="vertical-align:middle;text-align: center;font-size: 4;padding-left: 20px;" valign="middle">
<a target="_blank" style="outline: 0;text-decoration: none;">
<img alt="a" style="display: inline-block;" src="https://tatutrad.net/images/rosario-logo-2.png" width="" height="95" border="0" class="CToWUd">
</a>

Comment 3

[Anje]

Thanks for info.

I've performed some tests which may help developer work out wha is going on.

On website which has link for image - The image size is 530px x 925px

Using only the part of code as supplied by reported in the 'signature text' box.

click on Write and visually all is as expected.
SAve as draft
Edit that write mesage to put same image in a table and save as draft
then use the generated code in 'signature text' box

<td style="vertical-align:middle;text-align: center;font-size: 4;padding-left: 20px;" valign="middle">
<a target="_blank" style="outline: 0;text-decoration: none;">
<img alt="a" style="display: inline-block;" src="https://tatutrad.net/images/rosario-logo-2.png" width="" height="95" border="0" class="CToWUd">
</a>

<br>
<table cellpadding="2" cellspacing="2" border="1" width="50%"
align="left">
<tbody>
<tr>
<td valign="top"><br>
</td>
<td valign="top"><br>
</td>
</tr>
<tr>
<td valign="top">This is me text<br>
</td>
<td valign="top"><a target="_blank"
style="outline: 0;text-decoration: none;">
<img alt="a" style="display: inline-block;"
src="https://tatutrad.net/images/rosario-logo-2.png"
width="" height="95" border="0" class="CToWUd">
</a></td>
</tr>
</tbody>
</table>
<br>

Click on Write
All seems ok so far

In Drafts select saved email
please note - no image shows as by default because I do not allow remote content by default. Not sure if reporter is aware of this- but if you use image stored on a remote link - not stored on your computer - then it contains remote content and will not display for many recipients if remote content is not permitted by default as a security method.

Need to then allow remote content for that message
At this point image not in table looks ok - image in table shows as large image.
Click on 'Edit'
Write message now shows images as correct size proding you are allowing remote content from website otherwise images will be broken.

Go back to 'Draft' saved copy
Drag right side of window too make window wider.

Images start to flicker - first image suddenly displays very large - even larger than the one in table.
Keep expanding window and now both images revert to the small expected size.
Make window less width - first image reverts to smaller size and image in table is the large size.

You can get the same issue if you change the height of the Window and tuhs increase height of Message Pane.

By finding a 'sweet spot' between hight of window and width of window I can end up with both images displaying a small size.

I'm uploading some images to show the visual issue.

Comment 4

[Anje]

Attachment: imae-size-issue-1.jpg

Comment 5

[Anje]

Attachment: imae-size-issue-2.jpg

Make window wider - First image - not in table so large now that a scrollbar is necessary to see the image in tabl;e which although not visible is very lage as well

Comment 6

[Anje]

Attachment: imae-size-issue-3.jpg

Alter window width and now first image is back to the size expected, but the image in table is still super large.

Comment 7

[Anje]

Attachment: imae-size-issue-4.jpg

Find a sweet spot by reducing height and move wide around and you get all as expected.

Comment 8

[carlos]

(In reply to Anje from comment #7)

Created attachment 9471138 [details]
imae-size-issue-4.jpg

Find a sweet spot by reducing height and move wide around and you get all as expected.

Hi Anje,

Thank you so much for performing those tests.

Nonetheless, the problem does not lie on the code itself, as I previously said. If I do the same in an older version of Thunderbird (for example, in version 128.6.0esr), this issue does not exist and the signature displays correctly in drafts, forwarded email... everything.

This issue started appearing from version 128.7.0esr onwards.

Do you think you could shed any more light about this issue? I shouldn't need to be changing my code after years of it working perfectly on the same computer and display.

Thanks,

Comment 9

[Magnus Melin [:mkmelin]]

There were changes related to image-zoom of oversized images. Maybe from that...

Comment 10

[carlos]

(In reply to Magnus Melin [:mkmelin] from comment #9)

There were changes related to image-zoom of oversized images. Maybe from that...

Hi Magnus,

Thanks for your reply! That totally makes sense.

Do you think that's something that can be fixed in a future update?

Best,

Comment 11

[Anje]

(In reply to carlos from comment #8)

(In reply to Anje from comment #7)

Created attachment 9471138 [details]
imae-size-issue-4.jpg

Find a sweet spot by reducing height and move wide around and you get all as expected.

Hi Anje,

Thank you so much for performing those tests.

Nonetheless, the problem does not lie on the code itself, as I previously said. If I do the same in an older version of Thunderbird (for example, in version 128.6.0esr), this issue does not exist and the signature displays correctly in drafts, forwarded email... everything.

This issue started appearing from version 128.7.0esr onwards.

Do you think you could shed any more light about this issue? I shouldn't need to be changing my code after years of it working perfectly on the same computer and display.

Thanks,

I only tested whether there was difference between image inside or external to a table.
The same issue regarding size of image effects both, although not necessarilly at the same time which is a bit unusual but.....

The issue on what size of image is displayed and the three various sizes, relates to the size of visual Message Pane in both height and width of window.
I never used the zoom etc. These tests purely show that a small change in window size and height thus changing the Message Pane available size is effecting what is displayed.
The largest size of image that got displayed is based on the actual size of the image stored on website.

Whilst developers are looking into this I can suggest a workaround which offers what you may call a better result.

Please try a workaround like this:
alter code so there is height and width set on table row and also height and width on the image itself
As an example I put a 100 px height and width on the cell and put a width="60" height="80" on image.
When I apply that to code, I have a better result and lots more control over what is displayed.

<td valign="top" height="100" width="100">
<a target="_blank" style="outline: 0;text-decoration: none;">
<img alt="a" style="display: inline-block;"
src="https://tatutrad.net/images/rosario-logo-2.png"
width="60" height="80" border="0" class="CToWUd"> </a></td>

The fact that the image itself is linked to an external storage only accessed via online means image has remote content and therefore many recipients of your emails may not see the image at all; they may only see a broken link. That is a separate issue which you may or may not think is important. To get around that problem, get a copy of image on your computer and use it instead, so it's part of email and not a link to some website.

Comment 12

[Corey Bryant]

(In reply to Magnus Melin [:mkmelin] from comment #9)

There were changes related to image-zoom of oversized images. Maybe from that...

Was that this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1917278?

Comment 13

[Magnus Melin [:mkmelin]]

Right, and/or bug 1875325 which was part of that. Let's mark it as regressed by bug 1917278 though

Comment 14

[Corey Bryant]

Martin, could you take a look at this?

Comment 15

[Martin Giger [:freaktechnik]]

There are two factors causing this issue for us now:

1. The source image is larger than it is being displayed (in this case much, much larger)
2. The image is only constrained in height but not in width

Our image sizing/overflow logic is mostly concerned with horizontal overflow. I'm going to have a think about how we can not run into this while not distorting images that would overflow.

Comment 16

[Francesco (no longer active, use PM for contact)]

Attachment: large-image.eml

This .eml contains the markup from comment 2, since this apparently demonstrates the issue. I guess that other sample messages are welcome.

Observed behaviour: In TB 115 the image displays "small" (height 95px), in TB 128 it displays large in the vertical (narrow) view but still small in the classic/horizontal view. "Edit message as new" shows the image "small" in the composer in both versions.

Making the vertical message preview wider causes some flickering between large and small size, and you can reach a state where the image in fact displays in small size. So this appears to be related to zooming of oversized images as Magnus suggested.

Is there more to the problem?

Comment 17

[Francesco (no longer active, use PM for contact)]

I looked at the code a bit. In 115, this comparison prevented an image to be "overflowing" if it was scaled down by the render due to HTML/CSS constraints:
https://searchfox.org/comm-esr115/rev/da57de275e7ae5c089e6e55e57a25dcd182e3664/mail/base/content/aboutMessage.js#54
https://searchfox.org/comm-esr115/rev/da57de275e7ae5c089e6e55e57a25dcd182e3664/mail/base/content/msgHdrView.js#4194

This has now been dropped down to comparing natural width to displayed width:
https://searchfox.org/comm-central/rev/216e642e56d6bcaebd8c693b4c39242e75741d13/mail/base/content/aboutMessage.js#84,86
https://searchfox.org/comm-central/rev/216e642e56d6bcaebd8c693b4c39242e75741d13/mail/base/content/msgHdrView.js#1062

So the task appears to be to distinguish these two cases:

1. Image scaled down from natural size by renderer to fit the viewport: Need to be able to scale up.
2. Image scaled down from natural size by renderer due to HTML/CSS constraints: Shouldn't be considered as overflowing.

Comment 18

[Martin Giger [:freaktechnik]]

I have some ideas to try for how to prevent images getting larger than they should be, but I haven't had a chance to test it yet. Essentially some of the aspect ratio preservation logic the browser comes with should not require the forced height: auto we currently have.

Comment 19

[carlos]

Hi everyone,

Do you guys have any update over this?

Currently still using Thunderbird as it's the only email client powerful enough for our email needs, but this oversizing of this image is very frustrating as it takes so much screen real estate.

Thanks in advance!

Comment 20

[Martin Giger [:freaktechnik]]

Attachment: Bug 1953072 - Don't remove image height restrictions for zoomable images. r=#thunderbird-front-end-reviewers

I've been contempalting the best solution for this bug for a while. This exchanges having images appear too large because their size was only bound by height and our styles removing that limitation for images potentially being distorted because their size is bound by height. I'm not sure this is really better, since I expect this to affect much more generated content like newsletters where embedded images will have both dimensions set.

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/1d871e5816f5
Don't remove image height restrictions for zoomable images. r=aleca