JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<input id="scale" value="0.75">
<div id="wrapper">
    <iframe src="http://jsfiddle.net/annam/e0rph4to/25/embedded/result/"></iframe>
</div>

CSS

#wrapper {
    transform: scale(0.75);
    transform-origin: 0 0;
    
    /* we have found that this line fixes the issue */
    /*-webkit-perspective: 1;*/
}

iframe {
    border: 2px solid #000000;
    width:640px; height: 1136px;
    
    /* fix recommended by https://code.google.com/p/chromium/issues/detail?id=441671
    to solve other issues with transformed iframe, does not fix this issue */
    -webkit-transform: translateZ(0);
}

JavaScript

$('#scale').change(function(){
    $('#wrapper').css('transform', 'scale(' + $(this).val() + ')');
})