search

GoogleChrome / dialog-polyfill

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

The "fixed" class no longer positions correctly in Chrome #220

Open rajsite opened 3 years ago

rajsite commented 3 years ago

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:

image

Firefox 88:

image

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

inopinatus commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

try this

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