bug: ion-content fullscreen --offset-top not recalculated after rotate

[digaus]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

When displaying a page on iOS in landscape mode and then rotate to portrait, the --offset-top is not recalculated so we get a black bar and not the content background on the top

Expected Behavior

Recalculate --offset-top when rotating

Steps to Reproduce

<ion-header></ion-header>
<ion-content [fullscreen]= "true" style="--background: red"></ion-content>

This should display fullscreen red background on iOS when rotating from landscape to portrait (have to open the page while in landscape mode to see the effect).

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.5
Ionic Framework : @ionic/angular 6.5.2
@angular-devkit/build-angular : 14.1.0
@angular-devkit/schematics : 14.1.0
@angular/cli : 14.1.0
@ionic/angular-toolkit : not installed

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1
@capacitor/core : 4.6.1
@capacitor/ios : 4.6.1

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v16.14.0
npm : 8.3.1
OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you reproduce this in an Ionic starter app and provide a link to the repo?

[digaus]

You need to test on iOS because of androids issue (ionic-team/capacitor#2840 - can fix that with another plugin but its easier to test on ios):

Now it seems that the calculation of the offset is only done on appload event or when initializing the ion-content

ionic-framework/core/src/components/content/content.tsx

Line 109 in 2707289

@Listen('appload', { target: 'window' })

I was able to fix it by adding this to my app:

           window.addEventListener('resize', () => {
                window.dispatchEvent(new Event('appload'));
            })

However this event should be handled by the ion-content itself

Here is the issue reproduced with starter app: https://github.com/digaus/toolbar-test

To test it: Open App -> rotate landscape -> navigate to me view-message page -> rotate portrait

[liamdebeasi]

Thanks! I can reproduce this behavior. Here is a dev build if you would like to test the proposed fix:

npm install @ionic/angular@6.5.4-dev.11676042504.1f4b8b02