sanitize.css cause modal+dialog opened and scroll to top.

HTML

<p style="margin-bottom: 1200px">paragraph</p>
<button type="button" data-toggle="dialog" data-target="#my-dialog">
  Open dialog
</button>

<dialog id="my-dialog">
  <p>This is dialog.</p>
  <p>
    <input type="text" />
  </p>
  <button data-dismiss="dialog">Close</button>
</dialog>

CSS

/* copy from sanitize.css ( https://github.com/csstools/sanitize.css ) */
/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}
/* end copy from sanitize.css */

JavaScript

function activateDialog(selector) {
  const dialogE = document.querySelector(selector)
  dialogE.showModal()
}

document.addEventListener("click", (event) => {
  if (event.currentTarget?.activeElement?.dataset?.toggle === "dialog") {
    console.debug(
      'clicking on `data-toggle="dialog" element.',
      event.currentTarget.activeElement,
    )
    event.stopPropagation()
    let targetDialog = event.currentTarget.activeElement.dataset.target
    if (targetDialog) {
      activateDialog(targetDialog)
    }
  }
})

document
  .querySelector('[data-dismiss="dialog"]')
  .addEventListener("click", (event) => {
    event.stopPropagation()
    let target = event.target
    if (target.closest("dialog")) {
      target = target.closest("dialog")
    }

    console.debug("trying to close html dialog.", target)
    target.close()
  })