updateComplete and firstUpdated working properly?

[tamis-laan]

I'm trying to scale my component using inner.style.transform = ``scale(${scale})`` to make sure the component fits inside the viewpoort if the viewpoort is smaller then the component. I do this when the viewpoort is resized and the first time the component is rendered. Specifically:

  async firstUpdated() {

    // Wait for render
    await this.updateComplete

    // Rescale component
    this.scaling()
  }

The scaling function is defined as followed:

  // Scaling function
  scaling() {
    // Get page wrapper
    var outer = this.shadowRoot.getElementById("outer")
    var inner = this.shadowRoot.getElementById("inner")
    // Window width
    var window_width = window.innerWidth
    // Scale
    var scale = Math.min(window_width/inner.offsetWidth,1.0)*this._zoom
    // Scale page to fit
    inner.style.transform = `scale(${scale})`
    outer.style.height = `${inner.offsetHeight*scale}px`
  }

This works when resizing the viewpoort but fails the first time the component is rendered. The component renders ontop or below other components. It looks as if inner.offsetHeight is incorrect and the component is not yet finished rendering. Am I doing something wrong or is there something wrong with updateComplete or firstUpdated?