GoogleChrome / dialog-polyfill

Polyfill for the HTML dialog element
BSD 3-Clause "New" or "Revised" License
2.45k stars 245 forks source link

Dialog changing from position `absolute` to `fixed` #225

Open craigfrancis opened 3 years ago

craigfrancis commented 3 years ago

Looks like <dialog> is now using position: fixed... as of Chrome 93?

https://github.com/w3c/csswg-drafts/issues/4645 https://www.chromestatus.com/feature/5756963046555648

Not looked into the details yet, but this can cause the window to scroll to the top with showModal(), which is annoying if showing/hiding the dialog, and finding yourself at the top of the page.

Quick fix for now...

  1. CSS dialog to use position: fixed, to match the updated default behaviour.
  2. JS needsCentering() to include && computedStyle.position != 'fixed'
  3. JS reposition() to use element.style.top = ((window.innerHeight - element.offsetHeight) / 2) + 'px';

I suspect that might cause other issues, but that's seems to have fixed my immediate problem.