diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
index f0c7c0c06..6e84cd59d 100644
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
+++ b/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
@@ -1,3 +1,12 @@
-
-
\ No newline at end of file
+
+
+
+
+
+
diff --git a/apps/ui/src/tabs/frame-in-tabs-overflow.xml b/apps/ui/src/tabs/frame-in-tabs-overflow.xml
new file mode 100644
index 000000000..e0df8bd11
--- /dev/null
+++ b/apps/ui/src/tabs/frame-in-tabs-overflow.xml
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/ui/src/tabs/main-page.ts b/apps/ui/src/tabs/main-page.ts
index df5477457..7e9ffb6d1 100644
--- a/apps/ui/src/tabs/main-page.ts
+++ b/apps/ui/src/tabs/main-page.ts
@@ -31,6 +31,7 @@ export function loadExamples() {
examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page');
examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page');
examples.set('frame-in-tabs', 'tabs/frame-in-tabs');
+ examples.set('frame-in-tabs-overflow', 'tabs/frame-in-tabs-overflow');
examples.set('item-color', 'tabs/item-color-page');
examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page');
diff --git a/packages/core/ui/tabs/index.ios.ts b/packages/core/ui/tabs/index.ios.ts
index 32a4a6e25..1a186804c 100644
--- a/packages/core/ui/tabs/index.ios.ts
+++ b/packages/core/ui/tabs/index.ios.ts
@@ -172,20 +172,22 @@ class UIPageViewControllerImpl extends UIPageViewController {
safeAreaInsetsTop = this.topLayoutGuide.length;
}
+ let conditionalSafeAreaBottom = owner.iosOverflowSafeArea ? safeAreaInsetsBottom : 0;
let scrollViewTop = 0;
- let scrollViewHeight = this.view.bounds.size.height + safeAreaInsetsBottom;
+ let scrollViewHeight = this.view.bounds.size.height + conditionalSafeAreaBottom;
if (owner.tabStrip) {
- scrollViewTop = this.tabBar.frame.size.height;
- scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + safeAreaInsetsBottom;
- let tabBarTop = safeAreaInsetsTop;
const tabBarHeight = this.tabBar.frame.size.height;
+ let tabBarTop = safeAreaInsetsTop;
+
+ scrollViewTop = tabBarHeight;
+ scrollViewHeight = this.view.bounds.size.height - tabBarHeight + conditionalSafeAreaBottom;
const tabsPosition = owner.tabsPosition;
if (tabsPosition === 'bottom') {
- tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - safeAreaInsetsBottom;
+ tabBarTop = this.view.frame.size.height - tabBarHeight - safeAreaInsetsBottom;
scrollViewTop = this.view.frame.origin.y;
- scrollViewHeight = this.view.frame.size.height - safeAreaInsetsBottom;
+ scrollViewHeight = this.view.frame.size.height - tabBarHeight;
}
let parent = owner.parent;