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(
+        `
+        <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`));
+    });
   });
 });
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 0000000000..7bbef774e4
Binary files /dev/null and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png differ
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 0000000000..933de4462f
Binary files /dev/null and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index ee77b2f467..28dd99e974 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -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;
 }