JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<div class="button box">click me</div>
<div class="box" id="box1" for="check1"><div class="highlight"></div></div>
<div class="box" id="box2">To replicate this issue, first change the scale using the input field above <br/>(change value to "0.7", press enter)<br />Notice how the text is blurry.<br/>Click on the grey "click me" button to see this issue fixed after some rerendering.</div>

<div class="box transform-wrapper">
    <div class="box" id="box3">This is some extra text inside a transformed layer. the blurriness here is worse and this is not fixed with the perspective css on the parent of the iframe</div>
</div>

CSS

html, body {
    height: 100%;
}
.box {
    position: absolute; 
}
.button {
    left: 0; top: 0; background: #ccc;
    width: 200px; height: 100px; text-align: center;
}
 #box1 {
    background: #65B4CE;
    width: 400px; height: 100px;
    left: 120px; top: 450px;
}

#box2 {
    left: 20px; top: 150px;
    font-size: 36px;
}

.highlight {
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: red;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.highlight.show {
    opacity: 1;
}

.transform-wrapper {
    transform: translate3d(0,0,0);
    top: 600px; left: 20px;
    width: 80%;
}

#box3 {
    font-size: 36px;
}

JavaScript

$('.button').click(function(){
    $('.highlight').addClass('show');
    setTimeout(function(){
        $('.highlight').removeClass('show');
    }, 350)
})