Shape resizing when cache is enabled

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<button id='tosvg'>to SVG</button>

<div id="wrapper">
	<canvas id="my-canvas"></canvas>
	<input type="number" id="change-width" min="1" placeholder="width" />
  <input type="number" id="change-height" min="1" placeholder="height" />
</div>

CSS

input {
	border: 1px solid #ddd;
	box-shadow: none;
	padding: 11px;
	font-size: 13px;
	border-radius: 5px;
	margin-right: 10px;
  margin-top: 20px;
	max-width: 150px;
	outline: 0 none !important;
}

JavaScript

// fabric.Object.prototype.objectCaching = false;

var canvas = new fabric.Canvas();
var el = document.getElementById('my-canvas');
var changeWidth = document.getElementById('change-width');
var changeHeight = document.getElementById('change-height');

// resizeToScale for the shapes
canvas.on('object:scaling', opt => {
  const { target } = opt;

  if (target) {
  	target.resizeToScale();
  }
}).on('object:selected', opt => {
	const { target } = opt;

  if (target) {
  	changeWidth.value = target.width;
    changeHeight.value = target.height;
  }
});

// Calculates the shape points
const regularPolygonPoints = function (sideCount,radius) {
    var sweep=Math.PI*2/sideCount;
    var cx=radius;
    var cy=radius;
    var points=[];

    for(var i=0;i<sideCount;i++){
        var x=cx+radius*Math.cos( i*sweep );
        var y=cy+radius*Math.sin( i*sweep );
        points.push( { x:x, y:y } );
    }
    return(points);
}

// Init the canvas
canvas.initialize(el, {
	backgroundColor: '#fff',
	width: 600,
	height: 600
});

// Define and add the rectangle shape
const rect = new fabric.Rect({
	padding: 5,
	left: 200,
  top: 200,
  originX: 'center',
  originY: 'center',
  width: 150,
  height: 150,
  rx: 0,
  ry: 0,
  fill: 'rgba(255,255,255, 1)',
  perPixelTargetFind: false,
  strokeWidth: 1,
  stroke: 'rgba(17,17,17,1)'
});
canvas.add(rect);

// Define and add the polygon shape
const polygon = new fabric.Polygon([], {
  left: 400,
  top: 200,
  padding: 5,
  originX: 'center',
  originY: 'center',
  fill: 'rgba(255,255,255, 1)',
  perPixelTargetFind: false,
  lockUniScaling: true,
  strokeWidth: 1,
  points: regularPolygonPoints(6, 75),
  stroke: 'rgba(17,17,17,1)'
});
canvas.add(polygon);
canvas.renderAll();



// Events
//-------------------------------------------------




// On change with
changeWidth.addEventListener('input', (e)=>{
	const selectedObject = canvas.getActiveObject();
	if (!selectedObject) return;
	
  selectedObject.resizeToScale();
  if...