ionic-team / ionic-team/capacitor

[Bug]: iOS margins broken after iframe goes fullscreen

Open
#8,054 15 comments 8 reactions 1 assignee Claimed by @theproducer View on GitHub
platform: ios type: bug
Dominant language
TypeScript
Stars
16.7k
Forks
1.3k
Avg merge
3d 15h
Merged PRs (30d)
10

Description

### Capacitor Version

```
gildas_gh@Mac capacitor-fullscreen-rotate % npx cap doctor
💊 Capacitor Doctor 💊

Latest Dependencies:

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

Installed Dependencies:

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

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

### Other API Details

```Shell
Compiled using XCode 16.4 (16F6)

Demo on iPhone 12, running iOS 18.5
```

### Platforms Affected

- [x] iOS
- [ ] Android
- [ ] Web

### Current Behavior

I am embedding an external video player with an iframe (in my example "Momindum" but it happens with Vimeo too)

I also have a header using `safe-area-inset-top` as top padding. This padding works when opening the app.

When you switch the embedded video to full screen, then rotate the screen, and finally exit full screen, the app margins are breaking.

It seems that after leaving full screen and rotating again the screen, `safe-area-inset-top` is now on the right side of the screen and it's doubled in size : one part is "inside" the web page (I mean can be controlled with HTML) and another is "outside" it (adding a red background to html and body don't cover it)

This bug happens when not rotating the screen too (part 2 of the video) : a white padding is added on top and bottom of the screen, outside `` (html has a burlywood background in the demo)

https://github.com/user-attachments/assets/886e4bce-749e-458b-bc49-f790e5df3c46

### Expected Behavior

When you leave full screen and turn the screen, the margins should return to the way they were before: the application should take up the full size of the screen, and the safe-area-inset-top should return to the top (vertical).

### Project Reproduction

https://github.com/Gildas-GH/capacitor-fullscreen-rotate

### Additional Information

_No response_

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.