Reusing IFrame for multiple reports results in incorrect layout

Ok, it has taken a while to resolve this one, but massive kudo's to the Power BI Support team for solving it.
I will try and explain things as best as I can - in the hope that this helps someone else in the future.

Issue Recap:
Reusing the embedding IFrame for multiple reports results in inconsistent rendering/layouts if the reports have different page sizes.

Issue Reason:
Part of the performance benefit of reusing the IFrame is that you don't throw away a lot of the inner HTML. Rendering multiple reports is much faster, but the frame content is FIXED to the size/dimensions of the report that was first rendered.

The Fix:
There are a small number of steps to implementing a fix for this.

1) Ensure that the div/element hosting the Power BI IFrame - is styled to the desired height + width

2) Set all reports (+ report pages) at 'design time' to use a page view of 'Fit to Width' - this is set in Power BI Desktop (see below).
3) In the embedding code -> When setting the embedded configuration object, add a custom layout

4) Set the display option to 'Actual Size'

5) Set a custom pageSize -> choosing a width + height of '100%'

Important Note: The custom page size does accept a percentage value and isn't fixed to a number (pixels).
This works even if you are using TypeScript definitions like I am, as is not clear from the documentation or published examples.
This was the deal-breaker!

You should end up with code like this:

const layoutSettings = {
      displayOption: models.DisplayOption.ActualSize,
      pageSize: {
        type: models.PageSizeType.Custom,
        width: "100%",
        height: "100%",
      }
} as models.ICustomLayout;

 
...And the Power BI Desktop page size setting (from step 2 above)


You are then in full control over the report dimensions - and you can handle viewports that are larger/smaller than your original report dimensions - and size things as required. The control is within your own applications - and you do not need to keep passing in new report dimensions to the embedding code when things change.

I had linked another post to this ticket previously: https://community.powerbi.com/t5/Developer/Report-getPages-returns-incorrect-report-page-dimensions-if/m-p/1041224#M23249

Calling 'getPages' will not return the correct report dimensions when reusing IFrames!

In my case, I am happy with the workaround of needing to know (up-front) what the report dimensions are.. and setting them myself in the container that hosts the embedded report.