Part of block disappears after applying CSS scale

Question

Part of block disappears after applying CSS scale

I would like to increase the size of the div by clicking on it, but part of this block is hidden after scaling.

The CSS property is transform-origin: 0 0;not suitable, because in the future I will need to track the location at which I clicked and increase it to this place.

Thank.

UPD:

Ok guys. I can’t explain the problem exactly.

http://jsbin.com/fecaduxidele/2/edit

Here I add a click event handler that gets the coordinates of the click and does the scaling to the click position.

And if I click on cell number 9 (for example), I cannot scroll my grid to cell number 1.

+4

javascript css zoom

Vadim sanko Jun 08 '14 at 12:32

4

Jake Cobb · Answer 1 · 2014-10-06T18:10:34+0000

background-size , :

#content {
  width: 300px;
  height: 300px;
  background: url(http://placeimg.com/300/300/any);
  background-size: 100%;
}

#content.scaled {
  width: 450px;
  height: 450px;
  /* -webkit-transform: scale(1.5); */
  -webkit-transition: all .5s ease-in-out; 
}

Edit: . JQuery ( CSS), , CSS. :

  var x = event.clientX,
      y = event.clientY,
      $this = $(this),
      scaling = !$this.hasClass('scaled');
  $this.toggleClass('scaled');
  if (scaling) {
    $this.parent().animate({
      scrollLeft: x,
      scrollTop: y
    }, 500);
  }