Hello,
Let me start off by saying that I absolutely love this framework and I have got far with it really quickly, until today. I have decided to include a tab menu into the application, but I’m having a problem with the content positioning, page pushing transitions and or the whole page content being scrollable with my attempt to fix it.
Current structure with my attempted fix:
index.html:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<script type="module" src="node_modules/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="node_modules/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="node_modules/@ionic/core/css/ionic.bundle.css" />
</head>
<body>
<ion-app>
<ion-nav root="page-app"></ion-nav>
</ion-app>
<script type="module" src="index.js"></script>
</body>
</html>
index.js:
import AppComponent from './path/app.js';
import HomeComponent from './path/home.js';
import TestComponent from './path/test.js';
customElements.define('page-app', AppComponent);
customElements.define('page-home', HomeComponent);
customElements.define('page-test', TestComponent);
app.js:
export default class AppComponent extends HTMLElement {
async connectedCallback() {
// Fetching the HTML and setting it here (app.html)
}
}
app.html:
<ion-header>
<ion-toolbar color="primary">
<ion-title slot="start">
Test
</ion-title>
<ion-buttons slot="end">
<ion-nav-link router-direction="forward" component="page-test">
<ion-button>
Test
</ion-button>
</ion-nav-link>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-tabs>
<ion-tab tab="tab-home" component="page-home"></ion-tab>
<ion-tab tab="tab-search"></ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-home">
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-search">
<ion-icon name="search"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
home.js:
export default class HomeComponent extends HTMLElement {
async connectedCallback() {
// Fetching the HTML and setting it here (home.html)
}
}
home.html:
<ion-content>
<h1>Hello World</h1>
</ion-content>
test.js:
export default class TestComponent extends HTMLElement {
async connectedCallback() {
// Fetching the HTML and setting it here
}
}
This works as expected, but I get this annoying scroller for both the content and tabs menu visiting the app’s root and the home’s content isn’t being doing the pushing transition when a new page is pushed. Which is also over another scroller, which is for the home view content (but that is fine, because I want the home tab to be scrollable. In fact, I can scroll the page a pixel or two if I focus on the tabs menu.
-
I have tried removing the ion-content tag around the ion-tabs tag that is in home.html -
Result: The main header perfectly push transitions as the test page comes in, but the content of the home tab doesn’t do the transition pushing effect. Also, the home tab’s content goes behind the shared ion-toolbar header in the home.html.
Screenshot Example:
-
Moving the ion-header in the shared app root to home.html (Which I really don’t want to do as I want the search tab to also share the same toolbar in the future -
Result: Weird page pushing transition as the test page is coming in, where I can see the header background color also fading in, instead of the text only - doesn’t look that smooth.
Tried looking everywhere, but was not able to find a fix. From the documentation to any available page discussing it on the web, nothing. 
Would really appreciate any assistance!