[Bug]: iOS App WebView viewport shrinks after exiting fullscreen mode

[basha-tlab]

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 7.4.4 @capacitor/core: 7.4.4 @capacitor/android: 7.4.4 @capacitor/ios: 7.4.4

Installed Dependencies:

@capacitor/cli: 7.4.4 @capacitor/core: 7.4.4 @capacitor/android: 7.4.4 @capacitor/ios: 7.4.4

[success] iOS looking great! 👌 [success] Android looking great! 👌

Other API Details

npm --version output: 11.6.1
node --version output: v24.11.0
pod --version output: 1.16.2

Platforms Affected

• [x] iOS
• [ ] Android
• [ ] Web

Current Behavior

Viewport shrinks and shows white bars at top/bottom. The WebView doesn't properly recalculate viewport dimensions.

Expected Behavior

Viewport should return to original size without visual artifacts.

Project Reproduction

https://github.com/basha-tlab/pannellum-ionic-capacitor-app

Additional Information

Bug Description

When using fullscreen API (or libraries that use it like Pannellum.js) in a Capacitor iOS app, exiting fullscreen mode causes the viewport to shrink with white/black bars appearing at the top and bottom.

Environment

• Capacitor Version: 7.4.4
• Platform: iOS
• **Framework:Ionic Angular
• Device: iPhone 17
• **iOS Version:26
• **Xcode Version:

Steps to Run/Reproduce

1.Clone the repo. 2.Run the App (lwith live reload) ionic cap run ios -l --external 3.Click on 'Go to Pannelum' button. 4.Navigates to 'Pannelum View Screen' 5.Click 'Open View' Button 6.This opens a Dialog with a 360 degree viewer. 7.Click on fullscreen icon button at top right. 8.This will put the app on Full Screen mode 9.Notice upon exiting the Full screen mode, by clicking 'X' button the view port on iOS app shrinks from both top and bottom

Expected Behavior

Viewport should return to original size without visual artifacts.

Actual Behavior

Viewport shrinks and shows white bars at top/bottom. The WebView doesn't properly recalculate viewport dimensions.

// Or with libraries like Pannellum: viewer.toggleFullscreen(); // Works fine on web, breaks on iOS Capacitor

[basha-tlab]

here is the Screen recording for more info

[basha-tlab]

any updates?

[yaxit24]

@basha-tlab can i raise a PR, i have made the below chanegs will they work ? Native iOS (AppViewController.swift): Subclassed CAPBridgeViewController to observe UIWindow fullscreen transitions. Added logic to force layout invalidation, reset contentInset to zero, and inject a JavaScript resize trigger upon exiting fullscreen. Web Layer (PannellumDialogComponent.ts): Implemented cross-browser fullscreen event listeners that trigger a forced repaint (reflow) and scroll reset specifically for iOS devices when fullscreen mode ends. Config & CSS: Updated capacitor.config.ts with ios: { contentInset: 'never' } to prevent automatic safe-area adjustments. Added viewport-fit=cover to the viewport meta tag and overscroll-behavior: none to global styles to prevent rubber-banding and layout shifts.

[basha-tlab]

@yaxit24 Is the fix more generic? because we have quite a few internal projects whose libraries rely on full screen DOM api and those projects were also facing this behaviour upon exiting full screen