JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overflow"></div>

<p id="btn">click to fix</p>

CSS

#overflow {
    overflow:auto;
    width:500px;
    height:200px;
    /* comment out the webkit-transform and the problem dissapears 
     * (but I need the transform for acceleration
     */
    -webkit-transform:translateZ(0);
    border:1px solid #000;
}

img {
    -webkit-transform:translateZ(0);
}
#btn {
    cursor:pointer;
}

#btn:hover {
    color:red;
}

JavaScript

var scrollbarWidth = 15;
var r = Math.floor((Math.random()*100000)+1);
//adding r to simulate non-cached images
var pagelink = 'http://jsfiddle.net/img/logo.png?'+r;


$('#overflow').html(
    "<img width='800' id='imgload' src='"+pagelink+"' />"
);
        
$('#btn').click(function() {
    $('#overflow').animate({height:200},0);
});