Неправильная ширина смещения при переключении между угловыми компонентами

Question

Чтобы изменить размер холста до текущего размера элемента, я использую следующий HTML:

<div #canvasContainer class="canvas-container">
<canvas id="canvas"></canvas>
</div>

Это позволяет запросить размер canvasContainer с помощью offsetWidth и offsetHeight, чтобы затем установить размер элемента canvas. Для этого я использую библиотеку Fabric и команду, где canvas - это объект fabric.Canvas, а this - угловой компонент.

ngAfterViewInit() {
  // Sets the canvas dimensions during the initial render
  console.log(this.canvasContainer.nativeElement);
  this.canvas.setDimensions({
    width: this.canvasContainer.nativeElement.clientWidth,
    height: this.canvasContainer.nativeElement.clientHeight
  });
}

Проблема заключается в том, что при переключении между компонентами offsetWidth объекта canvasContainer меньше фактической ширины. Я предполагаю, что это ширина полосы прокрутки, поскольку разница между шириной холста и шириной контейнера div лежит между 15px для Chrome и 12px в Firefox.

При изменении размера окна с помощью обратного вызова resize, offsetWidth является правильным, а также при проверке журнала консоли nativeElement даже во время переключения компонента.

Как лучше всего это исправить?

Исходный код компонента можно найти на Github .