1350726 - Table-editing circle x "grippers" appear outside of table at an offset

Status: NEW

(Core :: DOM: Editor, defect, P3)

Description

[cdq]

Attachment: Table pared down from a forwarded message from Yahoo!

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170316213829

Steps to reproduce:

1. Forward a message with a table. This usually happens with messages from Yahoo! with pasted URLs where Yahoo! builds a table with a preview of the link.

Alternately:
1. Open the attached grippers-wrong.eml, choose Message>Edit as New Message

2. Click in the the black part of the table. See result 1 below.
3. Click the topmost circle x gripper to delete it
4. Repeat for the new gripper that appears at the top
5. Click in the black part of the table again. See result 2 below.

The grippers behave correctly if you remove "position:relative" from the td's style.

Using Thunderbird 45.8.0 on Windows 10


Actual results:

1. The gripper for table editing appears outside of the table at the top edge of the editor window.
2. The gripper appears halfway outside of the editor window.


Expected results:

The grippers should appear within or adjacent to the selected table/entries.

Comment 1

[cdq]

Attachment: Screenshot of incorrectly placed table grippers, annotated

Comment 2

[Jorg K (CEST = GMT+2)]

Attachment: Simple HTML page showing the problem

This is a Mozilla Core::Editor problem since it can be reproduced in Firefox alone.

Comment 3

[Jorg K (CEST = GMT+2)]

Accidentally assigned to myself, happened when adding an attachment.

Comment 4

[k.mortimer]

I am using Firefox 61.0.1 on Windows 10 x64, and it appears that this issue can occur outside of conditions where a <td> has position:relative. However, this is inside a textbox and it may be inheriting position:relative? As such, I thought I would add my findings here, rather than create a new bug. 

To reproduce this case:
Navigate to outlook.office.com
Create a new email 
Insert any table (can have 1 column and 1 row) into the rich textbox 'editor' of the email
Attempt to edit text in the table
Note the location of the grippers is offset, very similar to this bug.

In this case, the table itself does not have position:relative, but the textbox (or its containers?) might apply position:relative - I'm not tech-savvy enough to parse Office's HTML. 

Compare the following working example:
Navigate to http://xing.github.io/wysihtml5/
Select the editable pane
Insert any table (can have 1 column and 1 row) into the rich textbox 'editor'
Attempt to edit the text in the table
Note the location of the grippers is 'correct'