[css-position] Interoperability issues with absolute... | w3c/csswg-drafts

Nobody has claimed this yet.

https://drafts.csswg.org/css-position-3/#abs-pos

I'm seeing some interop issues related to position:absolute, and it's unclear to me whether the spec gives clear guidance as to what the correct behavior should be. (It's entirely possible I haven't looked in the right place, though.)

My questions relate to the default placement of an abs-pos element with display:block, where the element occurs at the beginning (more-or-less, see below) of a line; the issue is whether the abs-pos element lines up with the top of the containing line, or drops below it.

Consider first a simple example:

data:text/html,<!doctype html><p><div style="position:absolute">X</div>foo

In this case Safari, Chrome, Firefox all agree that the abs-pos "X" overprints the beginning of the in-flow text "foo". AIUI, this is because at the point where the abs-pos element occurs, the current line is empty, so the block is aligned with the top of the containing line.

However, if we change the containing block element to a bulleted list item:

data:text/html,<!doctype html><ul><li><div style="position:absolute">X</div>foo

Safari and Chrome now drop the "X" down below the text "foo", whereas in Firefox it still overprints. Which behavior is correct?

(ISTM the Firefox behavior here makes sense: the bullet is entirely outside the line box, so does not affect the placement of the abs-pos element within it.)

A further discrepancy occurs in the presence of borders/margins/padding. For comparison, consider an example where the abs-pos element has display:inline:

data:text/html,<!doctype html><p><span style="border-left:10px solid blue"><span style="position:absolute">X</span>foo

Here, the browsers all agree that the inline abs-pos "X" appears after the left border of the containing span, so it overprints the beginning of "foo".

But if we add display:block to the abs-pos span:

data:text/html,<!doctype html><p><span style="border-left:10px solid blue"><span style="position:absolute;display:block">X</span>foo

then Safari and Chrome let the "X" move back to the beginning of the line, so it overprints the blue border, whereas Firefox considers that by the time the "X" occurs, the line is non-empty and so it drops below. Which behavior is correct?

(Here again I think the Firefox behavior makes sense; comparing the previous example where the abs-pos element has display:inline, we can see that its "anchor" position is clearly not at the start of the line, so it seems correct that it drops below. OTOH, Firefox also does this if the containing span only has a right border, which is clearly a bug.)

A left margin or padding on the enclosing span yields similar results; see https://bugzilla.mozilla.org/show_bug.cgi?id=1553418 for a more extensive testcase.

Read the CSS Position 3 absolute-positioning section and reproduce the data URL examples in Safari, Chrome, and Firefox. Compare the list-item and border/margin/padding cases with the Bugzilla 1553418 testcase; done means the interop differences are resolved by clear specification guidance.

Written by the indexing model from the issue text.

[css-position] Interoperability issues with absolute positioning

Description

Contributor guide

First steps

Research direction

Assessment