Blurry text in Chrome, any fix?

Question

I have an app that has tons of popups, and I position them like this:

.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

but some popups are blurry. This transform: translate is whats killing it. As far as I know this is chrome problem, but what is the best way to fix it?

Answer 1

In 2024, my problem with blurry text was resolved by removing border-radius from the element. There is a very similar still open chromium bug from 2017: https://issues.chromium.org/issues/41321934#comment22

Reproduction of the problem, removing textarea-test border class fixes the blurriness. https://codepen.io/culli/pen/poBzPGJ

function toggleBorder(e) {
  const ta = document.getElementById('textarea-test');
  ta.classList.toggle('border');
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.outer-container {
  transform: scale(0.9);
  height: 100%;
}

.form-container {
  transform: translate(100px, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 400px;
  padding: 1rem;
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.05);
  font-family: "Public Sans", -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.text-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.inner-container {
  border-radius: 10px 10px 0 0;
  width: 100%;
}

.textarea-test {
  box-shadow: none;
  margin: 0;
  font-size: 0.875rem;
  display: block;
  height: 100px;
  font-size: 1rem;
  background: transparent;
  font-family: inherit;
  width: 100%;
  border: none;
  padding: 0.5rem;
  scroll-padding-bottom: 0.5rem;
  color: rgba(0, 0, 0, 0.95);
  line-height: 1.5;
  resize: none;
  outline-width: 0;
}

.textarea-test.border {
  border-radius: 10px 10px 0 0;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  background: rgba(250, 250, 250);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px inset;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}

<p>This demonstrates what is likely a bug in Chrome with a combination of transform translate/scale, border-radius, and scrollbars causing the font to become blurry.</p>
<p>Toggle the checkbox "add extra border" and the blurriness will come and go. The toggle simply adds a `border-radius` style to the textarea.</p>
<div class="outer-container">
  <div class="form-container">
    <form class="text-form">
      <div class="flex-container">
        <div class="inner-container">

          <textarea autocomplete="off" spellcheck="false" name="question" font-size="base" placeholder="Enter text" rows="1" maxlength="420" class="textarea-test border" id="textarea-test">So take up your hat, and take up your pen, In the land of Seuss, where fun has no end. Lorem ipsum, lorem ipsum, let your imagination soar in the</textarea>
        </div>
        <div class="controls">
          <div><label for="enable-extra-border">add extra border</label>
            <input type="checkbox" name="enable-extra-border" checked="true" onclick="toggleBorder(this)">
          </div>
          <div>
            <button>cancel</button>
            <button>save</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 2

you can try this in your .css :

.myfont{
-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

Answer 3

This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).

In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "super css hackers" to achieve some better/clearer rendering in some cases.

But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit developers fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.