使用translateZ进行缩放时如何消除模糊文本

Question

我在使用translateZ处理3d变换时div元素中的文本有问题。转换是在javascript中完成的。

我尝试过：

div.blurryTextDiv {
  -webkit-font-smoothing: subpixel-antialiased;
}

和

div.blurryTextDiv {
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

但这些方法都不起作用。

这就是实际转型的样子：

function onParentClick () {

    document.getElementById("parentOfDiv").style.transform = "translateZ(500px)";

}

这就是我的html结构：

<figure id="parentOfDiv" onclick="onParentClick()">
  <div id="moreContent" class="blurryTextDiv">why is this text so blurry</div>
</figure>

我不知道这是否重要但是带有模糊文本的div元素实际上没有被转换，然而div的父元素正在被变换和放大，从而导致div用它进行缩放，从而导致模糊文本。

有没有减轻我div的模糊文字？

请帮忙！任何建议，将不胜感激。