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.

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)

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;">)

Original message with absolute positioning - so far, so good

But when replying to such message, things get messy!

• attribution line covered
• reply space covered

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:e68f1390-f5f8-8e0b-aa3f-253f6221303b@example.com"
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.

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.

Duplicate of bug 1276391.

(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.

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.

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

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