From b297529afc4b93a93f7eaecd31dd5a88a3de5f4e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 4 Oct 2023 15:18:48 -0400 Subject: [PATCH] fix(core): allow fullscreen scroll content to flow outside container for translucent tab bar (#28246) Issue number: resolves #17676 --------- ## What is the current behavior? The IonNav, IonRouterOutlet, and .ion-page elements have `overflow: hidden` which prevent content from spilling out of it. This was likely done to prevent these elements from having overflow scroll (since the inner IonContent should be scrollable). However, this breaks the translucency effect on IonTabBar because the content in IonContent can not scroll under the IonTabBar. ```html ... ... ... ``` In Ionic v3 components such as IonTabs and IonNav did have `overflow: hidden`: https://github.com/ionic-team/ionic-v3/blob/cf35d5eb7f38d088e7c2588e42738228c39e9964/src/components/app/app.scss#L241-L246 However, components like IonNav were not used inside of tabs at the time, so the reported bug was not a problem then. ## What is the new behavior? - Removed `overflow: hidden` from IonNav, IonRouterOutlet, and .ion-page. This change seems safe to make because the `position: absolute` and top/right/bottom/left values should ensure that these elements take up the available screen space and avoid having overflow scrolling. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `7.4.2-dev.11695832397.13fa6703` Note: Fixing this reveals https://github.com/ionic-team/ionic-framework/issues/21130 which is why this fix is dependent on the linked issue getting fixed first. --------- Co-authored-by: ionitron --- core/src/components/nav/nav.scss | 1 - .../router-outlet/router-outlet.scss | 1 - .../tab-bar/test/translucent/tab-bar.e2e.ts | 35 ++++++++++++++++++ ...-container-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 10538 bytes ...-container-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 5280 bytes core/src/css/core.scss | 1 - 6 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss index d036423e21..125bb460fb 100644 --- a/core/src/components/nav/nav.scss +++ b/core/src/components/nav/nav.scss @@ -6,6 +6,5 @@ position: absolute; contain: layout size style; - overflow: hidden; z-index: $z-index-page-container; } diff --git a/core/src/components/router-outlet/router-outlet.scss b/core/src/components/router-outlet/router-outlet.scss index d036423e21..125bb460fb 100644 --- a/core/src/components/router-outlet/router-outlet.scss +++ b/core/src/components/router-outlet/router-outlet.scss @@ -6,6 +6,5 @@ position: absolute; contain: layout size style; - overflow: hidden; z-index: $z-index-page-container; } diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts index fedd12f046..ada3b65e46 100644 --- a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts @@ -39,5 +39,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent`)); }); + test('should render translucent tab bar even when wrapped in a page container', async ({ page }) => { + await page.setContent( + ` + + +
+ My Content +
+ + + Recents + + + + Favorites + 23 + + + + Settings + + +
+ `, + config + ); + + const tabBar = page.locator('ion-tab-bar'); + + await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent-container`)); + }); }); }); diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7bbef774e4c2fdab227c1920f36baee269fa6583 GIT binary patch literal 10538 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 literal 0 HcmV?d00001 diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..933de4462fc5620684fe95d41870676657a80115 GIT binary patch literal 5280 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