diff --git a/core/src/components/router/test/tabs/e2e.ts b/core/src/components/router/test/tabs/e2e.ts
new file mode 100644
index 0000000000..c14c103abf
--- /dev/null
+++ b/core/src/components/router/test/tabs/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('router: tabs', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/router/test/tabs?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/router/test/tabs/index.html b/core/src/components/router/test/tabs/index.html
new file mode 100644
index 0000000000..e02f225778
--- /dev/null
+++ b/core/src/components/router/test/tabs/index.html
@@ -0,0 +1,147 @@
+
+
+
+
+ Nav
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index d2fbbc0f55..422abc0d21 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -13,11 +13,27 @@ export const shadow = (el: T): ShadowRoot | T => {
};
const getLargeTitle = (refEl: any) => {
- return refEl.querySelector('ion-header:not(.header-collapse-condense-inactive) ion-title[size=large]');
+ const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
+ const query = 'ion-header:not(.header-collapse-condense-inactive) ion-title[size=large]';
+
+ if (tabs != null) {
+ const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
+ return activeTab.querySelector(query);
+ }
+
+ return refEl.querySelector(query);
};
const getBackButton = (refEl: any, backDirection: boolean) => {
- const buttonsList = refEl.querySelectorAll('ion-buttons');
+ const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
+ let buttonsList = [];
+
+ if (tabs != null) {
+ const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
+ buttonsList = activeTab.querySelectorAll('ion-buttons');
+ } else {
+ buttonsList = refEl.querySelectorAll('ion-buttons');
+ }
for (const buttons of buttonsList) {
const parentHeader = buttons.closest('ion-header');
@@ -277,7 +293,6 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
-
enteringToolBarEls.forEach(enteringToolBarEl => {
const enteringToolBar = createAnimation();
enteringToolBar.addElement(enteringToolBarEl);