White Space Around CSS3 Scale

var scaleTo = 0.5,    itemWidth = $('.scaleB').width(),  itemHeight = $('.scaleB').height();


function scaleThis(meausure) {    var output = meausure * scaleTo;              return output;  }
$('.scaleB').on({  'mouseover': function(event) {        $(this).css({      'width' : scaleThis(itemWidth) + 'px',      'height' : scaleThis(itemHeight) + 'px'    });      },  'mouseout': function(event) {        $(this).css({      'width' : itemWidth + 'px',      'height' : itemHeight + 'px'    });   }  });

.wrapper {  background-color: #cccccc;}.wrapper:after {  content: "normal";}.wrapperScale {  background-color: #dddddd;}.wrapperScale:after {  content: "wrapped";}.wrapper_jQuery:after {  content: "jQuery";}.wrapper div:nth-of-type(even),.wrapperScale div:nth-of-type(even) {   background: blue; }
.wrapper div:nth-of-type(odd),.wrapperScale div:nth-of-type(odd) {   background: red; }
.scale, .wrapperScale div, .scaleB {  width: 50px;  height: 50px;}
.scale:hover, .wrapperScale:hover {  transform: scale(0.5);  transform-origin: top left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper"><!-- White space with Scale --><div class="scale"></div><div class="scale"></div></div>
<!-- Whitout Scale --><div class="wrapper wrapperScale">  <div></div>  <div></div></div>
<!-- jQuery --><div class="wrapper wrapper_jQuery"><div class="scaleB"></div><div class="scaleB"></div></div>

IE leaves white space on div transform scale

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

Transform scale keeps the original space around the scaled element

A brutal way would be to virtually reduce space needed by element.

Your example shows a known width & height, so it makes it easy. else you would need a javascript method.

.box_1 {
    width:  300px;
    height: 300px;
    transform: scale(0.5);
    transform-origin: left top;
  margin-bottom:-150px;
  margin-right:-150px;
}

https://jsfiddle.net/0bc4sxk3/1/

Scaling up would mean positive margins.

Transform only happens at screen, elements still use initial room and place needed in the flow of the document.

scaling image in html creates white space underneath

You need to update min-height property as the screen size changes.

Edit: You can add a media query.

@media (max-width: 768px) {
  #headerwrap {
    min-height: 100%;
  }
}

And also remove br elements above the artist's name and align the content vertically.

How can I remove white spaces in CSS

CSS

img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: 95%; //change from auto to 95%
}

.back{
background-color : #fffee0; //add background color
}

HTML

<div id="toolbar-options" class="back" > 

---

Related Topics