An Interesting Use Case for React Portal

TLDR, I used React Portal because transform: translate(-50%, -50%) was making my text blurry.

The Problem

The text in the dropdown is very blurry.

This modal uses transform: translate(-50%, -50%).

This, combined with max-height: 240px and overflow: auto for the dropdown, causes the text to be blurry.

See these resources for more details about this problem.

The Solution

The text in the dropdown is no longer blurry!

Rendering the modal in a React Portal fixes this problem, because I no longer need to use transform. Instead, I render the modal into document.body. The container of the modal looks like this:

.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

The HTML looks like this:

<div className={styles.container} style={{ top: window.scrollY }}>
...
</div>

Problem solved!