fix(core): allow fullscreen scroll content to flow outside container for translucent tab bar (#28246)

Issue number: resolves #17676

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

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
<ion-tabs>
  <ion-router-outlet> <!-- this has overflow: hidden -->
    ...
    <ion-content fullscreen="true">...</ion-content>
  </ion-router-outlet>
  <ion-tab-bar translucent="true">...</ion-tab-bar>
</ion-tabs>
```

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?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 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

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.2-dev.11695832397.13fa6703`

Note: Fixing this reveals
#21130 which is why
this fix is dependent on the linked issue getting fixed first.

---------

Co-authored-by: ionitron <[email protected]>

Author: liamdebeasi

core/src/components/nav/nav.scss

@@ -6,6 +6,5 @@
   position: absolute;
 
   contain: layout size style;
-  overflow: hidden;
   z-index: $z-index-page-container;
 }

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;
 }

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(
+        `
+        <style>
+          ion-content {
+            --background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+          }
+        </style>
+        <ion-tabs>
+          <div class="ion-page">
+            <ion-content fullscreen="true">My Content</ion-content>
+          </div>
+          <ion-tab-bar slot="bottom" translucent="true" selected-tab="1">
+            <ion-tab-button tab="1">
+              <ion-label>Recents</ion-label>
+            </ion-tab-button>
+
+            <ion-tab-button tab="2">
+              <ion-label>Favorites</ion-label>
+              <ion-badge>23</ion-badge>
+            </ion-tab-button>
+
+            <ion-tab-button tab="3">
+              <ion-label>Settings</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        </ion-tabs>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent-container`));
+    });
   });
 });

core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png

@@ -156,7 +156,6 @@ html.ios ion-modal.modal-card .ion-page {
   justify-content: space-between;
 
   contain: layout size style;
-  overflow: hidden;
   z-index: $z-index-page-container;
 }