[csswg-drafts] [css-position] Interoperability issues with absolute positioning (#3952)

jfkthame has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] Interoperability issues with absolute positioning ==
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3952 using your GitHub account

Received on Wednesday, 22 May 2019 10:38:44 UTC