Relatively-positioned table-row behaves as absolute containing block in Firefox (unlike other engines)

NEW
Unassigned

Status

()

defect
3 years ago
3 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(firefox50 affected)

Details

(Whiteboard: [webcompat])

Attachments

(2 attachments)

Posted file testcase 1
Spinning this off of https://github.com/webcompat/web-bugs/issues/2905

STR:
 1. Load attached testcase.

EXPECTED RESULTS ("expected" = what other engines do):
 "snapToRight" should be at the bottom-right edge of the black-bordered area.  

ACTUAL RESULTS (in Firefox):
 "snapToRight" is at the bottom-right edge of the lightblue area ("tableRow").

ANALYSIS:
 It seems other browsers don't allow the lightblue element (with "display:table-row; position:relative) to form an abspos containing block, whereas we do. Not sure offhand who's correct or what the reason is for this difference.
Note that this bug seems to be involved in a LinkedIn page mis-rendering in Firefox, per https://github.com/webcompat/web-bugs/issues/2905
Actually, it looks like "position:relative" simply has no effect on the table-row in Chrome. (If I add "left: 5px" to that element, Firefox will shift it 5px away from its left edge like you'd expect for a relatively-positioned element -- but that has no effect in Chrome.)

It looks like this interaction (between relative positioning & table-row) is simply undefined in CSS2. :-/  The spec says:
> The effect of 'position:relative' on table-row-group, table-header-group,
> table-footer-group, table-row, table-column-group, table-column, table-cell,
> and table-caption elements is undefined.
https://drafts.csswg.org/css2/visuren.html#propdef-position
Whiteboard: [webcompat]
You need to log in before you can comment on or make changes to this bug.