ionic-team / ionic-team/capacitor
[Bug]: iOS App WebView viewport shrinks after exiting fullscreen mode
- 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
## 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
Assessment
This issue has not been assessed yet.