Полоса прокрутки не изменяется, когда изменения шкалы в хроме

Question

У меня есть div, и внутри этого div у меня есть элемент 'svg'. Я хочу увеличить масштаб, и с каждым щелчком значение «шкалы» элемента «svg» увеличивается и, таким образом, создает эффект масштабирования. Однако по какой-то причине полоса прокрутки родительского div не изменяется, когда увеличивается масштаб внутреннего «svg». Эта проблема возникает только в Chrome, в IE я действительно получаю желаемый результат.

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

Из того, что я могу видеть, это кажется, что это div, что не обновляется, как это должно быть, а не сам svg. Это означает, что то, что вам нужно сделать, это заставить браузер перерисовать Div элемент, который может быть сделано, как показано здесь

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>