Skip to content

[css-2][css-position-3] Absolutely positioned boxes in inline relatives: not interoperable #609

Closed
@FremyCompany

Description

@FremyCompany

CSS 2.2 leaves this behavior undefined:

If the direction is ltr, the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
http://www.w3.org/TR/CSS22/visudet.html#containing-block-details

CSS Position 3 says "top,left" are relative to the first fragment, and "bottom,right" the last.

In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined.
https://drafts.csswg.org/css-position-3/#def-cb

Testcases

https://jsfiddle.net/pu494kg8/ (rtl)
https://jsfiddle.net/pu494kg8/1/
https://jsfiddle.net/pu494kg8/2/ (ltr)
https://jsfiddle.net/pu494kg8/3/
https://jsfiddle.net/pu494kg8/4/

  • ltr: Edge and Chrome consider "right" to be the left of the first fragment.
  • ltr: Firefox considers "bottom" and "right" to be the bottom/right of the first fragment.
  • rtl: Implementations are not interoperable at all.

I recommend we change the spec to match Edge/Chrome behavior for ltr (and mirror it for rtl), except if we intend to fix. I am not willing to have us move away from the Webkit/Blink behavior if we don't have a clear signal promising a fix for at least one of those, given the compat risks.
Thoughts?

// cc: @atanassov @fantasai @tabatkins @grorg @dbaron

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions