I GOT
I changed the start of the conversion to the upper left, used the automatic fields on the trimSpace field to focus instead, and made a few changes to JavaScript. Works for me in IE.
I wrapped the formScale box in another div called trimSpace and set its width to the new width of the scaled elements. I hide the X overflow for this new div to trim the spaces. This div can still be larger than the pageContainer field, and the scrollbars are functional.
Here, check out this script: http://fiddle.jshell.net/bUY75/24/
HTML
<div id="pageContent"> <div id="formBox"> <div class="trimSpace"> <div id="formScale"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </div> </div>
Javascript
zoomProject(); resize(); $(window).resize(function (e) { resize(); zoomProject(); }); function resize() { $("#pageContent").css('height', window.innerHeight - 60 + 'px'); } function zoomProject() { var maxWidth = $("#formBox").width(), percent = maxWidth / 930; $("#formScale").css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')' }); $(".trimSpace").css('width', (930 * percent) + 'px'); $("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px'); }
CSS
#pageContent { width:100%; overflow:auto; padding-bottom:20px; border:1px solid red; }
Previous
This is because Internet Explorer does not scale the CSS width attribute when elements are converted in other browsers. The spaces you see are where the scaled elements were expanded before they were reduced in appearance. You do not need to completely disable overflow, only on a scaled element. It just removes the extra spaces without affecting the visibility of the content. I made a few changes to clear the demo. Here's a script for a demo: http://fiddle.jshell.net/bUY75/2/
and here is the code:
HTML
<input type="range" name="percent" min="1" max="300" step="1" value="100" onchange="zoomProject(this.value)"> Zoom (1 to 300%) <div id="pageContent"> <div id="formBox"> <div id="formScale"> <div class="box">test1<br><input type="text"></div> <div class="box">test2</div> <div class="box">test3</div> <div class="box">test4</div> </div> </div> </div>
CSS
#pageContent { width: 100%; overflow: auto; padding-bottom: 20px; border: 1px solid red; } #formBox { display: block; position: relative; height: 100%; padding: 0; } #formScale { display: block; position: relative; padding: 15px 10px; margin: 0; width: 100%; overflow-x: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -ms-transform-origin: top left; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .box { height: 110px; background-color: yellow; margin-bottom: 10px; } .more-content { height: 400px; background-color: #2bde73; padding: 10px; font-size: 18px; color: white; margin-top: 20px; }
Javascript
var height = $("#formScale").height(); window.onload = function() { resize(); $(window).resize(function (e) { resize(); }); }; function resize() { $("#pageContent").css('height', window.innerHeight - 60 + 'px'); } function zoomProject(amount) { var maxWidth = $("#formBox").width(), percent = amount / 100; $("#formScale").css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')' }); }