IOS iPhone 13 bug, iPhone 14 working, Wrong ActionBar Offset in nested page-router-outlet, likely due to iosOverflowSafeArea used to compute actionbar offset in nested outlet

Update: I have just tried the latest ns/core with Angular 15 and the issue still persists. However, I have an additional important info in regards to the issue.

When I use an iPhone 14 simulator with iOS 16.1 the issue is not appearing. However, using other simulators with iOS16.1 the bug persists. I tried with iPhone 13 simulator and iOS 16.1 and iPad Pro 11-inch tablet simulator with iOS 16.1
and on a real iPhone 13 with 16.1.1 and 16.1.2.

The issue seems to be somehow related to iosOverflowSafeArea being used in nested page-router-outlet to compute the offset of the top element, even though the actionbar is disabled. This is likely the source of the problem.

I tried to find a workaround for the problem. The following code allows to get rid of the extra spacing on the top. However, than the extra spacing appears on the bottom of the page as the layout is not computed for the page without actionbar :(
Would be great if someone could provide help!

public onPageRouterOutletLoaded(args: EventData) {
		const pro = args.object as unknown as Frame;
		pro.iosIgnoreSafeArea = true;
}

<page-router-outlet actionBarVisibility="never" name="outlet-0" (loaded)="onPageRouterOutletLoaded($event)">
		</page-router-outlet>

Issue Description

Hello together,
I have a self build tabs control which uses 4 nested page-router-outlets.
I just updated from "@nativescript/core": "8.3.5" to "@nativescript/core": "8.3.6" and run into a problem,

When I navigate to the page and with it navigate the nested page-router-outlets, they get an actionBar offset which should not be there as the actionBar is disabled for the nested page-router-outlets.

When I only navigate one nested page initially, and than load the other nested pages with some timeout, I can see that the pages navigated with timeout display correctly, and only the initially loaded page has the wrong ActionBar offset.

Seems like the layout for the actionbar is rescaled somehow too late for the first page to render correctly. First image shows the first page loaded when transitioning to the page (wrong ActionBar inset), second one further pages in different page router outlets loaded with some timeout involved:

<GridLayout rows="46,2,*" columns="*,*,*,*">
	<!-- white tab bar -->
	<GridLayout row="0" col="0" colSpan="4" [columns]="_columnsForGridLayout" height="60" verticalAlignment="bottom"
		class="tabstrip">
		<GridLayout row="0" col="0" (tap)="onTabSelectedById(0)" *ngIf="_config?.tabConfigs?.length > 0"
			class="{{ _activeTab === 0 ? 'tab-strip-item-selected' : 'tab-strip-item' }}">
			<Label [text]="_config?.tabConfigs[0]?.title" horizontalAlignment="center"
				verticalAlignment="middle"></Label>
		</GridLayout>
		<GridLayout row=" 0" col="1" (tap)="onTabSelectedById(1)" *ngIf="_config?.tabConfigs?.length > 1"
			class="{{ _activeTab === 1 ? 'tab-strip-item-selected' : 'tab-strip-item' }}">
			<Label [text]="_config?.tabConfigs[1]?.title" horizontalAlignment="center"
				verticalAlignment="middle"></Label>
		</GridLayout>
		<GridLayout row=" 0" col="2" (tap)="onTabSelectedById(2)" *ngIf="_config?.tabConfigs?.length > 2"
			class="{{ _activeTab === 2 ? 'tab-strip-item-selected' : 'tab-strip-item' }}">
			<Label [text]="_config?.tabConfigs[2]?.title" horizontalAlignment="center"
				verticalAlignment="middle"></Label>
		</GridLayout>
		<GridLayout row=" 0" col="3" (tap)="onTabSelectedById(3)" *ngIf="_config?.tabConfigs?.length > 3"
			class="{{ _activeTab === 3 ? 'tab-strip-item-selected' : 'tab-strip-item' }}">
			<Label [text]="_config?.tabConfigs[3]?.title" horizontalAlignment="center"
				verticalAlignment="middle"></Label>
		</GridLayout>
	</GridLayout>

	<!-- lines below -->
	<ContentView row=" 1" col="0" colSpan="4" class="split-label" verticalAlignment="bottom">
	</ContentView>
	<AbsoluteLayout row="1" col="0" colSpan="4" height="2">
		<ContentView #idLineBelow height="2" class="tab-strip-item-selector">
		</ContentView>
	</AbsoluteLayout>


	<!-- page content -->
	<ContentView row="2" col="0" colSpan="4" [visibility]="_activeTab !== 0 ? 'hidden' : 'visible' "
		*ngIf="_config?.tabConfigs?.length > 0">
		<page-router-outlet actionBarVisibility="never" name="outlet-0">
		</page-router-outlet>
	</ContentView>
	<ContentView row="2" col="0" colSpan="4" [visibility]="_activeTab !== 1 ? 'hidden' : 'visible' "
		*ngIf="_config?.tabConfigs?.length > 1">
		<page-router-outlet actionBarVisibility="never" name="outlet-1">
		</page-router-outlet>
	</ContentView>
	<ContentView row="2" col="0" colSpan="4" [visibility]="_activeTab !== 2 ? 'hidden' : 'visible' "
		*ngIf="_config?.tabConfigs?.length > 2">
		<page-router-outlet actionBarVisibility="never" name="outlet-2">
		</page-router-outlet>
	</ContentView>
	<ContentView row="2" col="0" colSpan="4" [visibility]="_activeTab !== 3 ? 'hidden' : 'visible' "
		*ngIf="_config?.tabConfigs?.length > 3">
		<page-router-outlet actionBarVisibility="never" name="outlet-3">
		</page-router-outlet>
	</ContentView>

</GridLayout>

Has anyone an idea/workaround how I can manually enforce the actionbar height to be 0 on page load?

I already tried to inject the page into the Angular component and set:

this.page.actionBarHidden = true;
setTimeout(() => {
			this.page.frame.actionBarVisibility = 'never';
		}, 100);

but this has not had any effect.

Reproduction

No response

Relevant log output (if applicable)

No response

Environment

OS: macOS 13.0.1
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 18.12.1
npm: 8.19.2
nativescript: 8.3.3

# android
java: 11.0.16.1
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.1/14B47b
cocoapods: 1.11.3
python: 3.9.14
python3: 3.9.6
ruby: 2.7.6
platforms: 
  - DriverKit 22.1
  - iOS 16.1
  - macOS 13.0
  - tvOS 16.1
  - watchOS 9.1

Dependencies

"dependencies": {
  "@angular/animations": "15.0.2",
  "@angular/common": "15.0.2",
  "@angular/compiler": "15.0.2",
  "@angular/core": "15.0.2",
  "@angular/forms": "15.0.2",
  "@angular/platform-browser": "15.0.2",
  "@angular/platform-browser-dynamic": "15.0.2",
  "@angular/router": "15.0.2",
  "@apollo/client": "3.7.1",
  "@mnd/external-web-view": "file:../mnd-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.0.tgz",
  "@nativescript/angular": "15.0.0",
  "@nativescript/core": "8.4.1",
  "@nativescript/iqkeyboardmanager": "2.1.0",
  "@nativescript/localize": "5.0.4",
  "@nativescript/mlkit-barcode-scanning": "1.0.6",
  "@nativescript/mlkit-core": "1.0.6",
  "@nativescript/secure-storage": "3.0.0",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "4.1.1",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.6.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.29.4",
  "nativescript-health-data": "file:../mnd-custom-plugins/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-ui-autocomplete": "14.2.1",
  "nativescript-ui-calendar": "14.2.1",
  "nativescript-ui-gauge": "14.2.1",
  "rxjs": "7.5.7",
  "uuid": "9.0.0",
  "zone.js": "0.12"
},
"devDependencies": {
  "@angular-devkit/build-angular": "15.0.2",
  "@angular/compiler-cli": "15.0.2",
  "@graphql-codegen/cli": "2.15.0",
  "@graphql-codegen/fragment-matcher": "3.3.1",
  "@graphql-codegen/introspection": "2.2.1",
  "@graphql-codegen/typescript": "2.8.2",
  "@graphql-codegen/typescript-apollo-angular": "3.5.6",
  "@graphql-codegen/typescript-operations": "2.5.7",
  "@nativescript/android": "8.4.0",
  "@nativescript/ios": "8.4.0",
  "@nativescript/types": "8.4.0",
  "@nativescript/webpack": "5.0.12",
  "@ngtools/webpack": "15.0.2",
  "@types/d3-ease": "3.0.0",
  "@types/intl": "1.2.0",
  "@types/node": "18.11.10",
  "@types/uuid": "9.0.0",
  "keycloak-request-token": "0.1.0",
  "rimraf": "3.0.2",
  "sass": "1.56.1",
  "ts-node": "10.9.1",
  "typescript": "4.8.4"
}

Please accept these terms

I have searched the existing issues as well as StackOverflow and this has not been posted before
This is a bug report
I agree to follow this project's Code of Conduct

Potential bugfix:

Removing this line fixes the bug:

https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view/index.ios.ts#L214

or alternatively reverting the following change fixes the bug:

https://github.com/NativeScript/NativeScript/pull/10044/files

@cjohn001

@cjohn001 can you check if the PR #10134 fixes this issue?

@mukaschultze

@mukaschultze : Sorry for the late reply, I was on a business trip. I checkout your PR, unfortunately it does not work.

Note: I am not deep enough into the topic to explain the source of the problem. However, I have had a discussion with @CatchABus on discord recently before I posted the solution above: https://discord.com/channels/603595811204366337/606457628729671691/1048331850315202654

Maybe he can provide further background in regards to the source of the issue.

Related to #10109 (comment)

fixed with 8.4.3 thank you!

Navigation Menu

Repository navigation

IOS iPhone 13 bug, iPhone 14 working, Wrong ActionBar Offset in nested page-router-outlet, likely due to iosOverflowSafeArea used to compute actionbar offset in nested outlet #10092

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Dependencies

Please accept these terms

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

IOS iPhone 13 bug, iPhone 14 working, Wrong ActionBar Offset in nested page-router-outlet, likely due to iosOverflowSafeArea used to compute actionbar offset in nested outlet #10092

Description

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Dependencies

Please accept these terms

Activity

cjohn001 commented on Dec 9, 2022

mukaschultze commented on Dec 16, 2022

cjohn001 commented on Dec 17, 2022

cjohn001 commented on Dec 23, 2022

cjohn001 commented on Jan 4, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions