JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html id="html" lang="en"> 
<head>
<meta charset="utf-8">  
<title>Chrome position fixed and -webkit-transform:translateZ bug</title>
<style>
  * {padding:0; margin:0}
  html, body {min-width:1200px; }
  html {height:100%;background:#000;}
    body {min-height:100%;background:#999;-webkit-transform:translateZ(0px);}
    #w1 {        
        width:800px;
        height:1600px;
    margin:0 auto;
    background:#ff9900;  
    }
  #w2 {        
        width:400px;
        height:200px;
        position:fixed;
    top:50%;
    left:50%;
    margin:-100px 0 0 -200px;
    background:#ff00ff;  
    }  
</style>
</head>
<body>
    <div id="w1">
    <div id="w2">
      
    </div>
    </div>
</body>
</html>