bug: ion-content with fullscreen stretches vertically after revisiting tab and resizing window

[jjmhalew]

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

It seems ion-content in a component of a tab is being stretched in height when: going to another tab, resize window, go back to first tab. Initially I thought it only affected colors of the header and gradient-background, but after making a testproject I noticed the content is not visible and at the bottom until resize either.

Expectation:

Reality:

Expected Behavior

ion-content shouldn't stretch. (And so the background color remains the same as before switching tabs)

Steps to Reproduce

1. Open first tab (in my case with radial background)
2. Open second tab
3. Resize window
4. Go back to first tab

Results
Content is gone (in case of using css top)
Background with gradient is now tinted (until resize)

Code Reproduction URL

https://github.com/jjmhalew/ionic-fullscreen-tab-switch-bug

Ionic Info

Ionic:

Ionic CLI : 6.20.5 (C:\Users\JimHa\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.5.5
@angular-devkit/build-angular : 15.1.6
@angular-devkit/schematics : 15.1.6
@angular/cli : 15.1.6
@ionic/angular-toolkit : 8.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe)
npm : 8.19.2
OS : Windows 10

Additional Information

The background seems to have its original color again once the window is resized. Otherwise it has a lighted tint and if it has a transparant header, then the header is a lot darker. The easiest fix would be to trigger a onResize() function after switching tab I suppose.

The same issue happens on my mobile application (only tested on Android) when visiting the content after second login.

[liamdebeasi]

Thanks for the report. We merged a fix in 7b879fe which recomputed the ion-content fullscreen offset values whenever the window resized (to account for device rotation). However, we did not account for when the content is hidden. This resize operation should only take place on visible content otherwise the fullscreen values will be incorrect.

Here is a dev build if you would like to test the proposed fix: npm install @ionic/angular@6.5.7-dev.11677083790.181ed446

[jjmhalew]

Thank you so much for your quick response and fix. I just tested it and it works like a charm!

[liamdebeasi]

Thanks for the issue. This has been resolved via #26847, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.