fix(content): apply --offset-top and --offset-bottom values correctly

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #20735

What is the new behavior?

• Added a MutationObserver to resize content

In some cases, ion-content is rendered/hydrated before the root document element is hydrated. Because of https://github.com/ionic-team/ionic/blob/c15ae7cbf58065086816ca352c0a5ce981bb25b5/core/src/css/structure.scss#L25-L27 the root document element will have display: none, causing the ion-content to be hidden. This also means its offsetParent will be null and the element will have dimensions of 0x0. This is causing the --offset-top and --offset-bottom variables to not be set with the correct values.

To remedy this, I have created a MutationObserver that watched for attribute changes on document.documentElement (usually html). The callback will recalculate the offset variable and then remove the observer if the root document element has the hydrated class applied.

In the event that ion-content is hydrated after the root document element, we still have the this.resize() call in componentDidLoad. If the root document element is already hydrated, the MutationObserver will not be created.

Does this introduce a breaking change?

• Yes
• No

Other information

[brandyscarney]

Let me know if I need to elaborate on my comment