Scrollbar not getting modifed when scale changes in chrome

Question

I have a div, and inside that div I have an 'svg' element. I want to zoom in, and with every click the 'scale' value of the 'svg' element increases and thus creates a zoom effect. However, for some reason the scrollbar of the parent div is not being modify when the scale of the inner 'svg' grows. This problem occurs only in Chrome, in IE I actually get the wanted outcome.

fiddle example

var elementToScale = document.getElementById('svg');
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div>
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>

Answer 1

From what I can see, it appears that it is the div that is not updating as it should be, not the svg itself. This means that what you need to do is force the browser to redraw the div element, which can be done as shown here

var elementToScale = document.getElementById('svg');
var divRedraw = document.getElementById('divRedraw'); //gets the div element
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
  divRedraw.style.display = 'none'; //hides the element
  divRedraw.offsetHeight; //let's the browser "catch up" on the code so it gets redrawn
  divRedraw.style.display = ''; //shows the element again
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div id="divRedraw">
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>