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.

• https://stackoverflow.com/questions/32034574/font-looks-blurry-after-translate-in-chrome
• https://stackoverflow.com/questions/42669491/css-translate-with-percentage-causes-blurred-image/46117022#46117022

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!