1800850 - Complex HTML layout renders different than expected

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[uzivatel919]

Attachment: MT1.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Falkon/3.2.0 Chrome/87.0.4280.144 Safari/537.36

Steps to reproduce:

I opened email message.

102.4.0 (64-bit) Linux

Actual results:

Message layout is broken.

Expected results:

Message should be readeble.

I verified message in web inbox of mail.volny.cz where it looks, at least IMHO, at least good.

On other hand I checked also another webmail clients where it is also broken but slightly differently.

Comment 1

[uzivatel919]

Attachment: MT2.png

Comment 2

[uzivatel919]

Attachment: volny.cz.png

Comment 3

[uzivatel919]

Attachment: Indigo.eml

Comment 4

[uzivatel919]

Expected results:
Message layout is okay.

Comment 5

[Thomas D. (:thomas8)]

Attachment: Testcase: 1800850test.html

Fwiw, here's the decoded HTML part of reporter's test message.

Comment 6

[Thomas D. (:thomas8)]

Attachment: Indigo.fixed.multipart-related.eml

Reporter's testcase fixed: Changed outer Content-Type from multipart/mixed to multipart/related, which will then render triplet of social media icons inline as expected (<img src="cid:Facebook" />):
Content-Type: multipart/related;

That's bug 61815, wrong Content-Type used by Microsoft.

Comment 7

[Thomas D. (:thomas8)]

(In reply to uzivatel919 from comment #0)

Actual results:
Message layout is broken.

So I've extracted the HTML part of your message (see attachment 9303955 [details]), and (not surprisingly) it renders exactly the same on Firefox or Edge as in Thunderbird. uzivatel919, what exactly do you consider broken (rendered incorrectly) about the layout?

The only thing which I can spot is maybe the triplet of social media icons (src="cid:...") not rendering inline as expected, which is due to wrong outer Content-Type used by Microsoft (bug 61815); desirable, but not easy to iron that out on our side.

Comment 8

[uzivatel919]

(In reply to Thomas D. (:thomas8) from comment #7)

(In reply to uzivatel919 from comment #0)

Actual results:
Message layout is broken.

So I've extracted the HTML part of your message (see attachment 9303955 [details]), and (not surprisingly) it renders exactly the same on Firefox or Edge as in Thunderbird. uzivatel919, what exactly do you consider broken (rendered incorrectly) about the layout?

The only thing which I can spot is maybe the triplet of social media icons (src="cid:...") not rendering inline as expected, which is due to wrong outer Content-Type used by Microsoft (bug 61815); desirable, but not easy to iron that out on our side.

It is no so straighforward to describe what can be seen on picture but nonetheless…

Attachment https://bugzilla.mozilla.org/attachment.cgi?id=9303655 shows what is rendered in webmail client at mail.volny.cz. There can be seen no coloring, proper tabular layour rendering, image processing, etc. In contrast Thunderbird (and others) lacks this renderability.

I would say, if one is able to work around this MS bug, Thuderbird should be able also. If I mistakes on this, please feel comfortible to close this issue as due to 3ʳᵈ party bug. Btw, I can confirm broken layour for instance also in Icewarp and Roundcube webmail clients.

Comment 9

[Thomas D. (:thomas8)]

Comment on attachment 9303955 [details]
Testcase: 1800850test.html

.

Comment 10

[Thomas D. (:thomas8)]

Let's give this to Firefox then as a potential HTML rendering issue.
See testcase HTML file of attachment 9303955 [details].

Actual result:

• See screenshots of attachment 9303653 [details] (top), attachment 9303654 [details] (bottom).

Expected result (by reporter):

• See screenshot of attachment 9303655 [details].

Comment 11

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug is invalid.
If you think the bot is wrong, please reopen the bug and move it back to its prior component.
If your bug description is written in a non-English language, please use Google Translate or a similar service to translate it.

Please note that this is a production bug database used by the Mozilla community to develop Firefox, Thunderbird and other products.
Filing test bugs here will waste the time of our contributors, volunteers and employees.
Accounts that abuse bugzilla.mozilla.org will be disabled.

Comment 12

[b5]

(In reply to Thomas D. (:thomas8) from comment #7)

So I've extracted the HTML part of your message (see attachment 9303955 [details]), and (not surprisingly) it renders exactly the same on Firefox or Edge as in Thunderbird.

Thomas, just for your information: HTML is not rendered exactly the same in TB and FF. TB before bug 1429491 (fixed from TB 105) rendered everything in Quirks Mode (so this is still the case in TB 102) and due to bug 1659362 (on file since TB 78!) media queries don't work by default. So HTML display is worse in TB than in FF.

That said, the HTML contained in the e-mail (attachment 9303955 [details]) renders "ugly" in FF, so nothing better is to be expected in TB. Since FF has a very standards compliant rendering engine, it likely comes down to bad HTML, and it's surprising that the webmail client at mail.volny.cz does a "better" job.

Comment 13

[David Shin[:dshin]]

Ok, there are two different <html> tags in that decoded HTML - which is not a standard-compliant. If you delete one set, they render "reasonably enough."
So... yeah. I don't think this is valid.

If there should be something for the icon issue in comment 7, should probably be a separate ticket.