The "fixed" class no longer positions correctly in Chrome

[rajsite]

Using the provided fixed class in Chrome no longer centers the dialog in the middle of the page in Chrome. I think it is due to a change in style for dialog elements in Chrome.

Here is an example page and a screenshot using Chrome 90 and Firefox 88.

Chrome 90:

Firefox 88:

It looks like the dialog:-internal-modal pseudoelement has bottom: 0 set which is impacting the style:

[inopinatus]

agreed, native chrome gets it right, but looks like loading the 0.5.6 polyfill CSS intrudes on the native styles, and position goes sideways.

or rather, in my apps, up.

[IanVS]

Adding the following to my css seems to result in a decent positioning in chrome, firefox, and safari:

dialog.fixed {
  bottom: 50%;
  transform: none;
}

edit: nevermind, that breaks firefox, placing the modal too low. Not sure how to work around this one...

[xtools-at]

try this

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
    dialog.fixed {
        top: 0;
        transform: none;
    }
}