Icons appear blurry when centering with `transform: translateX(-50%)`

[cin4ed]

I'm just leaving this here for users that may have the same problem as me.

I was trying to center a fixed-position toolbar with radix-themes using the following code:

<Flex
  align="center"
  height="32px"
  gap="3"
  px="3"
  style={{
    position: "fixed",
    top: 10,
    left: "50%",
    transform: "translateX(-50%)",
    boxShadow: "inset 0 0 0 1px var(--gray-a6)",
    borderRadius: "var(--radius-3)",
  }}
>
  {/* ...icon buttons... */}
</Flex>

But I noticed that the icons (specially the square and text icons) inside the toolbar appeared blurry.

Why is this happening?

This blurriness is caused by subpixel rendering. When you use left: 50% and transform: translateX(-50%), the browser may position your element on a half-pixel (e.g., 400.5px), especially if the viewport or container width is odd. This causes the browser to anti-alias the content, making sharp icons or text appear blurry.

With translateX(-50%):

Without:

Solution

To avoid this, try using flexbox or grid for centering, which helps ensure your container lands on whole pixels and avoids subpixel rendering issues. For example the following code solved my problem:

<Flex
  align="center"
  justify="center"
  style={{
    position: "fixed",
    top: 10,
    left: 0,
    right: 0,
    margin: "0 auto",
    boxShadow: "inset 0 0 0 1px var(--gray-a6)",
    borderRadius: "var(--radius-3)",
    width: "fit-content", // or a fixed width
  }}
>
  {/* ...icons... */}
</Flex>

This approach centers the container without relying on transforms, keeping your icons crisp.