Bug: vertical centering buggy in tabs template

[alexandre-khoury]

Starter Type: angular Starter Template: tabs

Description: The vertical centering of the explore-container is buggy. When switching tabs, and/or resizing the page, the container's vertical position varies randomly.

My ionic info:

Ionic:

   Ionic CLI : 6.20.8

Utility:

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

System:

   NodeJS : v18.14.2
   npm    : 9.5.1
   OS     : macOS Monterey

Other Information: I suggest the following fix: putting the #container div in another one called #main with the following CSS properties, which stabilizes the centering:

#main {
  position: relative;
  width: 100%;
  height: 100%;
}

Let me know if I should do the PR.

[sean-perkins]

Hello, thanks for opening this issue!

We are tracking this issue here: https://github.com/ionic-team/ionic-framework/issues/21130

Adjusting the mark-up should not be necessary and is more masking the issue here. The issue is not present in the React or Vue starters and may very well be related to the hydrated bundle output used by our @ionic/angular package taking an additional frame to load in the styles.

Which ever tab is first loaded (can be simulated by refreshing the page on an active tab), is the tab with the visual styles.

We should fix this behavior in Ionic Framework, likely as a result of migrating the @ionic/angular package to the use the same custom elements output that the React and Vue packages use today.

I'm going to close this issue to consolidate with the existing issue in Ionic Framework. Thank you for reporting it!