diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts
index e9988f482..112c7c111 100644
--- a/tns-core-modules/ui/core/view/view.ios.ts
+++ b/tns-core-modules/ui/core/view/view.ios.ts
@@ -698,16 +698,18 @@ export namespace ios {
     }
 
     export function layoutView(controller: UIViewController, owner: View): void {
-        // apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
-        const parentPage = getAncestor(owner, "Page");
-        if (parentPage) {
-            const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
-            const currentInsetsTop = controller.view.safeAreaInsets.top;
-            const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;
+        if (majorVersion >= 11) {
+            // apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
+            const parentPage = getAncestor(owner, "Page");
+            if (parentPage) {
+                const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
+                const currentInsetsTop = controller.view.safeAreaInsets.top;
+                const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;
 
-            if (additionalInsetsTop > 0) {
-                const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
-                controller.additionalSafeAreaInsets = additionalInsets;
+                if (additionalInsetsTop > 0) {
+                    const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
+                    controller.additionalSafeAreaInsets = additionalInsets;
+                }
             }
         }
 
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index d17c66514..6d1e8f9c0 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -9,12 +9,15 @@ import {
 } from "./page-common";
 
 import { profile } from "../../profiling";
+import { ios as iosUtils } from "../../utils/utils";
 
 export * from "./page-common";
 
 const ENTRY = "_entry";
 const DELEGATE = "_delegate";
 
+const majorVersion = iosUtils.MajorVersion;
+
 function isBackNavigationTo(page: Page, entry): boolean {
     const frame = page.frame;
     if (!frame) {
@@ -315,10 +318,23 @@ export class Page extends PageBase {
 
         const insets = this.getSafeAreaInsets();
 
+        if (majorVersion <= 10) {
+            // iOS 10 and below don't have safe area insets API,
+            // there we need only the top inset on the Page
+            insets.top = layout.round(layout.toDevicePixels(this.viewController.view.safeAreaLayoutGuide.layoutFrame.origin.y));
+        }
+
         const childLeft = 0 + insets.left;
         const childTop = 0 + insets.top;
-        const childRight = right - left - insets.right;
-        const childBottom = bottom - top - insets.bottom;
+        const childRight = right - insets.right;
+        let childBottom = bottom - insets.bottom;
+
+        if (majorVersion >= 11 && this.actionBar.flat) {
+            // on iOS 11 the flat action bar changes the fullscreen size
+            // the top of the page is the new fullscreen
+            childBottom -= top;
+        }
+
         View.layoutChild(this, this.layoutView, childLeft, childTop, childRight, childBottom);
     }