JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

Animate <button class="no-bug">without Blur Bug</button>
<button class="yes-bug">with Blur Bug</button>
<button class="reset">Reset</button>
<div class="container">
    <div class="zuege">Hello World!</div>
</div>

CSS

.container {
    margin: 50px;
    text-align: center;
}

.zuege {
    width: 200px;
    margin: 0px auto;
    padding: 10px 0;
    border: 1px solid blue;
    background: #efe;
}

/* THIS IS THE MOFO BUG RIGHT HERE*/
.bug {
    -webkit-transform: translateZ(0);
}

.animate {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0.25);
    }
    25% {
        -webkit-transform: scale(1.5);
    }
    50% {
        -webkit-transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1.0);
    }
}

JavaScript

$('button').on('click', function (e) {
    var $zuege = $('.zuege');
    var $target = $(e.target);

    $zuege.removeClass('bug animate');
    
    // if reset, we done
    if ($target.hasClass('reset')) {
        
        return;
    }
        
    // defer a tick
    window.setTimeout(function () { 
        
        if ($target.hasClass('yes-bug')) {
            
            $zuege.addClass('bug');
        }
        $zuege.addClass('animate');
    }, 0);
});