Centering a dialog like the primitive example makes the dialog blurred caused by a subpixel rendering

[italodeandra]

The Dialog example from here uses the following Tailwind class for centering it top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%], but this causes the dialog to be rendered in a subpixel position depending on the window size.

This is how it looks:

This is how it should look (after removing translate):

I know this issue isn't really related to Radix, but I would like to know what I could do to fix this? Does anyone have any suggestions?

[vladmoroz]

You can put the dialog content panel into a flex layout with align-items: center and justify-content: center instead of transform. This technique won't cause subpixel antialiasing issues.

[italodeandra]

You mean by also making its position absolute and inset 0 (left, top, right and left equals 0) right? In this case the overlay click for closing the dialog stops working and changing the pointer event for both inner (the card) to auto and outer content (the flex centered) to none didn't fix it.

[vladmoroz]

You'd set position: fixed, inset: 0, and display: flex on the overlay, and nest the dialog content in the overlay. For a reference, inspect Radix Themes implementation of how the dialog parts are styled:
https://www.radix-ui.com/themes/playground#dialog

[italodeandra]

That worked. Thanks!