[Bug] iOS WebView: height="100%" collapses to 0 (Android OK) — requires explicit height #156
Description
Environment
- CLI: 8.9.3
- @nativescript/core: 8.9.9
- Android Runtime: 8.9.2
- iOS Runtime: 8.9.4
- Plugin(s):
"@nativescript-community/ui-checkbox": "^2.0.12", "@nativescript-community/ui-material-activityindicator": "^7.2.71", "@nativescript-community/ui-material-snackbar": "^7.2.71", "@nativescript/angular": "^20.0.0", "@nativescript/appavailability": "^2.0.0", "@nativescript/biometrics": "^1.3.1", "@nativescript/core": "^8.9.9", "@nativescript/datetimepicker": "^3.0.0", "@nativescript/facebook": "^3.1.0", "@nativescript/geolocation": "^9.0.0", "@nativescript/google-maps": "^1.8.0", "@nativescript/google-signin": "^2.1.1", "@nativescript/secure-storage": "^4.0.1", "@nativescript/social-share": "^2.3.0",
- @nativescript/angular: 20.0.0
- Angular: 20.1.0
Describe the bug
WebView does not honor height="100%" on iOS when rendering an HTML string.
- Android: Fills available space as expected.
- iOS: Appears to resolve to 0 height unless given a fixed DIP height (e.g.,
height="100"), which shows content but makes it scrollable and not full height of the parent.
This looks like percentage height not being respected even when the parent is sized.
To Reproduce
- Create a minimal NS Angular app/page.
- Place a
WebViewintended to fill the remaining space:<GridLayout rows="auto,*" iosOverflowSafeArea="true"> <Label row="0" text="Header"/> <WebView row="1" [src]="doc()" height="100%" /> </GridLayout>
doc = () => ` <!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <p>Some content</p> <img src="https://via.placeholder.com/600x400" /> </body> </html>`;
- Run on Android →
WebViewfills remaining space (OK). - Run on iOS →
WebViewrenders at 0 height (not visible). - Change
height="100%"toheight="100"→ content appears (scrollable), but not full parent height.
Repro also occurs if theWebView is insideStackLayout,FlexboxLayout, or with outer ScrollView removed.
Expected behavior
On iOS, <WebView height="100%"> should fill the remaining space of its parent (e.g., star row inGridLayout) similar to Android, without requiring a fixed DIP height or additional imperative sizing.
Sample project
Minimal snippet above; I can provide a repo if needed.
Additional context
- Tried the following without success on iOS:
- Putting the
WebViewin aGridLayout row="*"container. FlexboxLayoutwithflexGrow="1".- Removing
ScrollViewwrappers so the WebView can scroll itself. verticalAlignment="stretch",iosOverflowSafeArea="true", safe-area adjustments.
- Putting the
- Question: Is there a known issue or platform limitation with
WKWebView+ percent heights in NativeScript layouts? If so, is there a recommended cross-platform pattern to haveWebViewfill its parent without imperative sizing?
Logs aren’t showing runtime errors; this appears to be a layout/measurement behavior specific to iOS.