Dialogs are blurry in Chrome due to transform: translate

[sliptype]

Using transform: translate(-50%,-50%); with odd pixel value width & height causes rounding errors and blurriness in chrome. This is the content of a dialog before rounding the height and width to even values:

And after:

[kendrick]

Yep, this is a common issue with antialiasing when positioning via transform. The typical fix is to add a translateZ(0), which we're doing via translate3d. The most annoying thing about this is that since it's a rounding error it's 100% dependent on viewport width.

Since dialogs are already so JS-heavy, we might be able to get around this by positioning with JS, or by rounding the size of the dialog to the closest pixel with JS: https://stackoverflow.com/a/32329785

Would love thoughts and/or a PR on this. 😅

[kendrick]

(After a little tooling around, I think getting rid of positioning via transform and instead adding negative margin via JS is probably the way to go for now.)