Bug 254936 – REGRESSION (iOS 16.4): Modal gets stuck in in-app browser when using deprecated UIWebView. FIX: Switch to WKWebView

• Component: CSS
• Status: RESOLVED INVALID

[Pathik]

Created attachment 465749 [details]
modal not sticking to top

## Problem

we are using Cordova-ios 6.2.0  to create our iOS app. The issue is with the in-app browser feature in our mobile app in the iOS 16.4. This issue is not present in the previous stable iOS version (16.3 and earlier), and our team has not made any recent changes to the code that would affect this feature.

### What is expected to happen?

The modal should be present at top always while scrolling and editing text fields.

### What does actually happen?

The problem is that modal is misplaced in the in-app browser.

To provide more detail, when a user clicks on a link within the in-app browser that should open a modal, the modal does appear but upon scrolling (intermittent) and inputting into text field (always) the modal is floating in the middle of the browser instead of attaching the top which it should be.

Also on one of the page, the page is rendered correctly but upon scrolling the bottom buttons becomes invisible but remains interactive. However, the button should always show at the bottom.

The app is working perfectly using safari browser on all iOS.

Also, we are setting CSS fixed position but it's not working on iOS 16.4.

## What we tried

setting: <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
changing height to 100vh from 100%.
setting top:0 in CSS.

### Environment, Platform, Device

iOS 16.4

### Version information

Cordova: Cordova CLI -> 11.0.0 , 
Cordova Platforms -> cordova-ios - 6.2.0, 
Cordova Plugins -> cordova-plugin-inappbrowser : "version": "5.0.0",
Xcode - 14.2/14.3

Note: I'd like to prepare a sample demo program to reproduce the issue, but it doesn't occur in safari, so I haven't been able to prepare one yet.

[Simon Fraser (smfr)]

<rdar://107277234>

[Karl Dubost]

Pathik, 
> Note: I'd like to prepare a sample demo program to reproduce the issue, but it doesn't occur in safari, so I haven't been able to prepare one yet.

That would be great and thanks already for all the provided details.

It would be good to double check if there was a recent issue on 
https://github.com/apache/cordova-plugin-inappbrowser/issues?q=is%3Aissue
that would be similar. 

I have seen you reported it in quite a few places already
https://github.com/apache/cordova-ios/issues/1298
https://developer.apple.com/forums/thread/726690
https://stackoverflow.com/questions/75784071/modal-gets-stuck-in-in-app-browser-ios-16-4-beta-4-20e5239b

The Cordova issue is promising, people share the same concerns.

[Karl Dubost]

ok I can reproduce on iOS 16.4 normal release (not beta).

in a different way.
That would be probably interesting for Simon.

Once the app is installed and all the login, booking is done.

1. Edit Traveler details
2. tap on the firstname field
3. Enter characters
4. then tap on OK
5. Then name field
6. Enter characters
7. then tap on OK.

and so on. 
Each time the modal is shifted toward the bottom, but the CSS has not been modified and the style is still

```
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline:0
}
```

Also in addition to the modal being shifted, the input layer seems to stay in place. Aka the cursor is not at the right place anymore. So there is an issue with the alignments of the layers.

[Matt]

Also experiencing this issue with our Cordova app on iOS 16.4.  Has anyone found a workaround for this?

[Pathik]

I found out that we were using a custom plugin and in the plugin XIB file. we were using deprecated UIWebView. we deleted it and added WKWebView instead. It solved our problem. So, there is no bug in webkit.