IE leaves white space on div transform scale

Question

I am having a problem where I scale a div to fit it's parent. This problem only seems to show up in Internet Explorer. I've only tested on versions 9 and 11 but I'm sure it exists in others.

Whenever I scale the window down the div's scale as they are supposed to. However, in internet explorer, they leave this weird white space to the right. This seems to be happening inside #pageContent and the scaling of #formScale seem's to be the issue.

Does anyone have any ideas on why this may be happening? Because I can not figure it out for the life of me.

note - I do not want to solve this by hiding overflow

JSFiddle | JSFiddle Full Screen

Here is an image showing the white space when IE 9's window is shrunk:

HTML

<div id="pageContent">
    <div id="formBox">
        <div id="formScale">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</div>

CSS

#pageContent {
    width:100%;
    overflow:auto;
    padding-bottom:20px;
    border:1px solid red;
}

#formBox { display:block;height:auto; padding:15px 10px;border-bottom:5px solid red;}


#formScale::after {
  display: block;
  content: '';
  padding-bottom:5px;
}

#formScale
{
    display:block;
    position:relative;
    width:940px;
    left:50%;
    margin-left:-470px;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    transform-origin: top center;
    -ms-transform-origin: top center;
    -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:1178px;width:940px;background-color:yellow;margin-bottom:10px; }

JS

resize();
zoomProject();
$(window).resize(function (e) {
    resize();
    zoomProject();
});

function resize() {
    $("#pageContent").css('height', ($(window).height()-30) + '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 + ')'
        });
    }

Answer 1

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.

Answer 2

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 + ')'
  });
}