1720311 - CSS style="position:absolute; ..." of original message leaks into reply, and may cover reply text in odd ways - should be contained in quoted reply

Status: NEW

(Thunderbird :: Message Compose Window, defect)

Description

[adrien.rybarczyk]

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

Steps to reproduce:

1. Create an email with an element (for example a div) with css : style="position: absolute; top:0px"
2. Send email (for example to you)
3. Reply to the email or forward it

Actual results:

The element with the absolute position and the zero margin does not have its style deleted. It can therefore cover elements.

Expected results:

Clean up the content of the email before forwarding or responding by removing the absolute positions and the valuees of top, right, bottom and left.

Comment 1

[Thomas D. (:thomas8)]

Adrien, I am able to reproduce your scenario (Daily 92.0a1 (2021-07-17)), and yeah, perhaps Thunderbird could do better to contain absolutely positioned top-level elements of the original message in the quoted text instead of leaking it into the new composition of the reply, where it can indeed occupy the space and cover elements of your reply text. I'd guess this is a bit of an edge case (pun intended...). I'd also guess that we might actually fix this quite simply by adding a div with position:relative around the entire quoted reply, which will then automatically become the container/parent element for top-level elements having position:absolute of the original message.

https://stackoverflow.com/questions/11151089/position-one-element-relative-to-another-in-css

position: absolute will position the element by coordinates, relative to the closest positioned ancestor, i.e. the closest parent which isn't position: static.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

HTML format leaking of sorts is a well-known issue in Thunderbird, this reminds me of:

Bug 31052 - Display attachments inline: Contents & formatting of attached HTML file (background/CSS styles/position:absolute/dir="rtl"...) leak into main HTML part or vice versa (wrong bgcolor/images/unclosed tags...: unreadable; multipart/mime, iframe,send web page)

Comment 2

[Thomas D. (:thomas8)]

Attachment: Testcase1.eml with <div style='position: absolute; top: 0px'>

Here's a minimal testcase.

STR

1. Save testcase1.eml into a TB folder
2. Reply to the message
3. Try to type your reply, and look out for attribution line

Actual

• the space where the user would normally enter his reply is covered by the <div> having position:absolute which leaks from the reply quote into the composition context.

Expected

• Prevent leaking of position:absolute into the composition context of the reply
• Keep absolutely positioned elements of the original message contained in the quoted reply text.

Proposed implementation

• Add style="position: relative;" to a suitable container holding the entire quoted reply, which will contain any original element having position:absolute in the quoted reply text space (see comment 5 where I've successfully fixed the issue by having <blockquote style="position: relative;">)

Comment 3

[Thomas D. (:thomas8)]

Attachment: Screenshot 1: testcase1.eml in message reader

Original message with absolute positioning - so far, so good

Comment 4

[Thomas D. (:thomas8)]

Attachment: Screenshot 2: Composing reply to testcase1.eml - reply space and attribution line covered by absolutely positioned element leaked from quoted reply

But when replying to such message, things get messy!

• attribution line covered
• reply space covered

Comment 5

[Thomas D. (:thomas8)]

Attachment: Screenshot 3: Proposed simple fix: <blockquote style="position:relative">

Geoff, what do you think?

Proposed simple fix

We're using <blockquote> element to contain the quoted text of the original message.
Adding relative position to that will fix reporter's immediate issue (see screenshot):

<blockquote type="cite"
cite="mid:[e-mail]"
style="position:relative">

• That will always contain any oddly positioned elements from the original message, and allow users to reply outside the blockquote without wayward things leaking into their reply.
• It will not stop those original elements from ending up in odd positions when you decide to break up the blockquote, after which they might cover quoted text depending on original order of elements.

I think that's perfectly OK, and probably the best we can do.
We wouldn't want to try and convert or remove the absolute positioning, which is way too much work and has a high risk of destroying the intended layout of the original message.

Comment 6

[Geoff Lankow (:darktrojan)]

I don't know anything about transforming messages for replies and I'd really like to avoid learning about it if possible. Passing on your NI.

Comment 7

[José M. Muñoz]

Duplicate of bug 1276391.

Comment 8

[Thomas D. (:thomas8)]

(In reply to José M. Muñoz from comment #7)

Duplicate of bug 1276391.

Certainly related, but not duplicates. The key difference is that bug 1276391 is about pasting content (with wild offsets), which is clearly editor territory, and probably rarely happening in the wild wrt wild offsets. Whereas here on bug 1720311 it's about replying to a message which in itself might be perfectly correctly formatted (albeit with absolute positioning), and which falls apart only because we're not adding a suitable container with position:relative around the reply text. The container around the original message (currently <blockquote>) is within Thunderbird's control, not Editor.

My comment 5 has outlined a simple fix (estimated one line of coded at the right spot where we create the blockquote) for the basic case which I believe should not have significant side effects, but would cure a lot of problems with regular, well-formed absolute positioning in original messages. I accept that we wouldn't want to spent resources on attempting a full fix which may not even be possible or desirable. But if there's a simple measure mitigating the biggest part of the problem, I think we could and should try that.

Comment 9

[Magnus Melin [:mkmelin]]

If we do it it should probably be added to https://searchfox.org/comm-central/source/mail/themes/shared/mail/messageQuotes.css
But, it's unclear how many cases it would fix. It wouldn't fix cases of position: fixed; etc.

Comment 10

[Alessandro Castellani [:aleca]]

Should we maybe consider stripping any inline position attribute upon reading or replying a message?
I guess mailing lists with complex structures might use that CSS attribute, but they really shouldn't.

I propose to strip away any inline CSS that can affect the layout or leak outside the message editor. E.g.:

• position: absolute|fixed|static
• display: flex|grid which could prevent text from correctly wrapping

Comment 11

[Magnus Melin [:mkmelin]]

I would like to do bug 1731198, which would take care of this, though it's somewhat involved.