Hi, gamers

Open dialog

Slow animation

Browser notes

• In Chrome, while you can't tab to the buttons, clicking on them can still give them focus.
• In Firefox, the close button is still focusable by shift-tabbing before the open button.
• Browsers add about 19px margins around dialogs when they're open. In Chrome, it's implemented like this:

  dialog:-internal-dialog-in-top-layer {
    position: fixed;
    inset-block-start: 0px;
    inset-block-end: 0px;
    max-width: calc((100% - 6px) - 2em);
    max-height: calc((100% - 6px) - 2em);
    user-select: text;
    visibility: visible;
    overflow: auto;
  }

  Setting max-width and max-height to unset while the dialog is open (dialog:modal) seems to work. However, in Chrome, as the dialog is transitioning closed, the margin appears. It's a very glitchy because the margin is left over from a past rule, and it disappears when the element is modified again.