CSS плохой рендеринг в translateZ() vs scale()

Я заметил, что при преобразовании текста этими двумя способами существует большая разница в качестве:

.text1 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 40%;
  left: 0;
  transform-origin: 50% 50%;
  transform: scale(2); /* here */
  color: red;
  text-align: center;
  font-size: 22px;
}
.text2 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 60%;
  left: 0;
  transform-origin: 50% 50%;
  transform: translateZ(400px); /* here */
  text-align: center;
  font-size: 22px;
}
.perspective {
  width: 200px;
  height: 200px;
  perspective: 800px;
  transform-style: preserve-3d;
}
<div class="perspective">
  <div class="text1">Text</div>
  <div class="text2">Text</div>
</div>

Ответы

Ответ 1

причина размывания текста при преобразовании с помощью translateZ(400px) заключается в том, что это 3D-преобразование; браузер рассматривает элемент как текстуры вместо векторов, чтобы обеспечить аппаратное трехмерное ускорение.
Таким образом, в основном разрешение будет ниже при увеличении размера.

С другой стороны, преобразование с помощью шкалы является двумерным преобразованием браузер рассматривает элемент как вектор, а смазывание не происходит.

посмотрим, что произойдет с scale, как только мы начнем с 3d, не установив ни одного значения translateZ:

.text1 {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 40%;
    left: 0;
    transform-origin: 50% 50%;
    transform: scale(2);
    /* here */
    color: red;
    text-align: center;
    font-size: 22px;
}
.text1a {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translateZ(0) scale(2);
    /* here */
    color: blue;
    text-align: center;
    font-size: 22px;
}
.text2 {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 60%;
    left: 0;
    transform-origin: 50% 50%;
    transform: translateZ(400px);
    /* here */
    text-align: center;
    font-size: 22px;
}
.perspective {
    width: 200px;
    height: 200px;
    perspective: 800px;
    transform-style: preserve-3d;
}
<div class="perspective">
    <div class="text1">Text</div>
    <div class="text1a">Text</div>
    <div class="text2">Text</div>
</div>