Repository navigation
[motion-1] anchor-position - which box? #503
Description
The offset-anchor property says that percentages are relative to the width and height of "a box". The prose definition of the <position> value manually defines how to interpret a percentage, specifying that they're relative to "the content area". None of the examples have padding, border, or margin on the offset element, so it's impossible to tell what exactly is intended here, as all of the elements' boxes coincide.
Since 'offset-anchor' is clearly intending to match up with 'transform-origin' by default, I suspect we want to use the same box it does. I'm not sure whether we want to always use the initial value of transform-box or the computed value.
I suspect the best answer is the initial value (the "view box", aka border box for CSS). When you want to match the transform origin exactly, you can do that already with auto. I'm not sure what the use-cases would be to specify a different point than the transform origin that nevertheless requires using the same box as the transform origin. If we do realize we want to match this, we can always add a corresponding property with none | auto | <'transform-box'> as the value.
Activity
tabatkins commentedon Mar 3, 2023
Actually when poking around in this spec text, it feels most natural for it to use the same box as transforms; we even have a nice defined term for that ("reference box") that I can lean on.
tabatkins commentedon Mar 7, 2023
The spec currently reflects my decision above (it resolves the position against the
transform-box, same astransform-origin). Agenda+ to confirm.css-meeting-bot commentedon Mar 13, 2023
The CSS Working Group just discussed
[motion-1] anchor-position - which box?, and agreed to the following:RESOLVED: default box used by 'auto' value of 'offset-anchor' is box specified by 'transform-box', so it matches box used by 'transform-origin'The full IRC log of that discussion
<fantasai> TabAtkins: Most offset stuff refers to containing block for sizing/positioning<fantasai> TabAtkins: exception is offset-anchor, which specifies point that anchors to the path
<fantasai> TabAtkins: This needs to refer to one fo the element's boxes
<fantasai> TabAtkins: spec just says "a box"
<fantasai> TabAtkins: doesn't say which one
<fantasai> TabAtkins: the obvious one would be to use border box
<fantasai> TabAtkins: but since it's a transform, might want to synch up with other transforms
<fantasai> TabAtkins: I suggest using 'transform-box' property
<fantasai> TabAtkins: This would also default it to border-box, because that's what 'transform-box' defaults to, which is good
<fantasai> TabAtkins: but it would let you match, if you change the transform thing
<fantasai> florian: Seems reasonable
<fantasai> PROPOSED: default box used by 'auto' value of 'offset-anchor' is box specified by 'transform-box', so it matches box used by 'transform-origin'
<fantasai> astearns: objections?
<fantasai> RESOLVED: default box used by 'auto' value of 'offset-anchor' is box specified by 'transform-box', so it matches box used by 'transform-origin'