ionic-team / ionic-team/capacitor

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

Open
#8,231 9 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
16.7k
Forks
1.3k
Avg merge
3d 15h
Merged PRs (30d)
10

Description

### 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

```Shell
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

Image

## 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.