Re: [csswg-drafts] [css-anchor-position][other] Handling popover default styles (#10258)

@una pointed out in private chat that this defaults issue extends to dialogs in general, not just popovers; I'd missed that, despite looking at the styles for dialogs in general at the same time.

It stems from the same basic issue: it's using margins to center in the inline axis, which mispositions it when you use anchor positioning. See [this basic example](https://software.hixie.ch/utilities/js/live-dom-viewer/saved/13948):

```html
<!DOCTYPE html>
<dialog open id=foo>foo</dialog>
<p id=bar>bar</p>
<style>
body { background: linear-gradient(to right, white 49.5%, black 0 50.5%, white 0);
#bar { width: 100px; height: 50px; border: thick dotted; anchor-name: --bar;}
#foo { position-anchor: --bar; position-area: bottom right; background: lime; /margin: 0;}
</style>
```

The big black bar indicates the center of the page - the dialog is centered in the bottom-right position-area cell, which puts it far away from its anchor and looking oddly off-center as well. It also ends up positioned identically if you instead open it as a modal, and scrolls with its anchor (because that's how anchored fixpos is supposed to work!)

Luckily, the modal dialog behavior is essentially identical to the popover behavior - fixpos, centered in the screen. The non-modal dialog is a bit different - abspos, centered inline, auto-positioned block. This works out nicely! We can just add another behavior for `dialog` when it's abspos rather than fixpos, so it *does not* resolve the block insets to 0 and sticks with `normal` alignment in the block axis; by default, then it'll use the static position, as specified today. That would let us simplify the stylesheets further:

```css
dialog {
  position: absolute;
  place-self: dialog; /* new */
  /* deleted
  X inset-inline-start: 0; inset-inline-end: 0;
  X width: fit-content;
  X height: fit-content;
  X margin: auto;
  /*
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}
dialog:modal {
  position: fixed;
  overflow: auto;
  /* deleted
  X inset-block: 0;
  */
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

/* ...irrelevant stuff that stays as-is... */

[popover] {
  position: fixed;
  place-self: dialog; /* new */
  /* deleted
  X inset: 0;
  X width: fit-content;
  X height: fit-content;
  X margin: auto;
  */
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```

leaving us with just:

```css
dialog {
  position: absolute;
  place-self: dialog;
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}
dialog:modal {
  position: fixed;
  overflow: auto;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

/* ...irrelevant stuff that stays as-is... */

[popover] {
  position: fixed;
  place-self: dialog; 
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```

And now, using `position-area` on a dialog will Just Work (once you also set `position-anchor`, since it doesn't get an implicit anchor)

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10258#issuecomment-3120522262 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 25 July 2025 22:08:14 UTC