fix(content): fullscreen works when rotating device

[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)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• 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 URL: resolves #26743

Rotating the device can cause safe area values to change. This means that the fullscreen values on ion-content, --offset-top and --offset-bottom, can be invalidated. We do not listen for these device orientation changes, so blank space can sometimes appear above headers or below footers.

What is the new behavior?

• Adds a throttled resize event listener that calls the this.resize() method to recalculate the fullscreen valeus.

I considered the following alternatives:

1. ScreenOrientation API: This has a change event we could listen for, but it is not supported on iOS.
2. deviceorientation: This has cross-browser support but requires a permission prompt in order to use. This means that all Ionic apps that use ion-content would need to prompt the user for access data from the orientation sensor on their devices.

The resize event has cross-browser support and does not have any permissions restrictions. The above two features also give us more information than we need. We don't care what the orientation is, we just want to know when the orientation changes.

I also added the resize callback in a 100ms timeout to avoid any layout thrashing since this.resize accesses some element properties that can force layouts to occur.

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.