IE leaves white space on div transform scale

Question 1

I GOT IT

I changed the transform origin to top left, used automatic margins on the trimSpace box to center instead, and made a few changes to the JavaScript. Works for me in IE.

I wrapped the formScale box in another div called trimSpace and set the width of it to the new width of the scaled elements. I hide the X overflow for this new div to trim the whitespace. This div can still be larger than the pageContainer box, and scrollbars are functional.

Here, check this fiddle: 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;
}
#formBox {
  display: block;
  position: relative;
  height: 100%;
  padding: 0;
}
#formScale::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formScale {
    display:block;
    position:relative;
    width:940px;
    margin: 0; //This was the cause of the left whitespace
    /*left:50%;*/
    /*margin-left:-480px;*/
    -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;
}

.trimSpace {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    /*width: 100%;*/
    overflow: hidden;
}

.box {
    height:1178px;
    width:940px;
    background-color:yellow;
    margin-bottom:10px;
}

Previous

This happens because Internet Explorer does not scale the CSS width attribute when the elements are transformed while other browsers do. The whitespace you're seeing is where the scaled items extended before they were reduced in appearance. You don't need to disable overflow entirely, only on the scaled item. That simply clips off the excess whitespace, not affecting the visibility of the content. I made a few modifications to clean up the demo. Here's a fiddle to demonstrate: http://fiddle.jshell.net/bUY75/2/

and here's the code:

HTML

<input type="range" name="percent" min="1" max="300" step="1" value="100" onchange="zoomProject(this.value)">&nbsp;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 + ')'
  });
}

Question 2

When you transform an element, it's somewhat like using position:relative. The element still takes up its original place in the document flow, it just gets rendered differently.

By that reasoning, I'd be inclined to say that the better question is why does Chrome not have this empty space? Technically, it's supposed to!

To resolve the issue, you can simply use overflow-x:hidden to remove horizontal scrolling from your container element. I know you said you don't want to, but that's the only solution I can think of.

Question 3

Unfortunately, if you want to target IE specifically - you may have to use IE CSS hacks. http://www.webdevout.net/css-hacks

http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/