Scrollbar wird nicht verändert, wenn die Skalierung in Chrom geändert wird

Question

Ich habe ein div, und innerhalb dieses div habe ich ein 'svg' Element. Ich möchte hineinzoomen, und mit jedem Klick erhöht sich der 'scale' Wert des 'svg' Elements und erzeugt somit einen Zoom Effekt. Aus irgendeinem Grund wird die Bildlaufleiste des übergeordneten div nicht geändert, wenn die Skalierung der inneren 'svg' wächst. Dieses Problem tritt nur in Chrome auf, in IE bekomme ich tatsächlich das gewünschte Ergebnis.

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

Von dem, was ich sehen kann, scheint es, dass es die div ist das nicht, da es nicht die svg selbst sein sollte, ist die Aktualisierung. Dies bedeutet, dass Sie benötigen, was den Browser dazu zwingen das div-Element neu zu zeichnen, die wie hier gezeigt getan werden kann

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>