JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="test">
    <div class="testInner">
        This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
    </div>
</div>

CSS

.test
{
    -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
    /* -webkit-transform: scale(1.2); */
    -webkit-transform: scale3d(0.5, 0.5, 1);
    text-align: center;
    font-size: 42px;
    white-space: nowrap;
    /* text-shadow: 0 0 2px #000; */
}