iFrame's ASPX controllers issue on iPad

[zahra-alsabah]

I am currently using cordova 11.0.0, angular 14, ios 6.3.0, and iPadOS version 16.5, I have an iFrame that contains an ASPX URL in which there are dropdown boxes and checkBoxes, all of these controllers are working perfectly on iPhone, Android, and browsers (chrome and safari), except for iPad and iPad simulator, the checkBoxes are checkable but the dropdowns are not working at all.
here's my current code:
HTML:
<iframe *ngIf="this.URL" #networkframe class="networkframe" [src]="this.URL"> </iframe>
SCSS:
.networkframe { width: 450px; height: 400px; border-width: 0px; margin-left: -8px; position: absolute; }

config.xml:
<access origin='*'/> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <allow-navigation href="*" />

I have tried several CSS codes since i believed that the issue might be related to styling, here are some of my tries :
I added a container to the iFrame and applied the following styling :

.networkframe { width: 450px; height: 400px; border-width: 0px; margin-left: -8px; position: absolute; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .containerIframe{ overflow: hidden; }

also :

added this preference :

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

I hope that you have an idea about this issue and thank you in advance!

[breautek]

The issue doesn't appear to related to Cordova.

all of these controllers are working perfectly on iPhone, Android, and browsers (chrome and safari), except for iPad and iPad simulator, the checkBoxes are checkable but the dropdowns are not working at all.

Are you able to test the standard Safari browser on iPad and determine if the issue also occurs?

Here are some general tips you can do to troubleshoot/find the cause that I generally use:

1. If you're using a standard <input> / <select> dropdown, then make sure there is nothing appearing on top of it. This might be an issue if you're using absolute positioned elements. An element that is overlapping and on top of the select box may be capturing any touch events preventing the select box from receiving it. Easiest way to determine if there are overlapped elements is by using the web inspector "Pick Element" feature. This tool allows you to "Pick" an HTML node by touching it in the webview. If you use this tool and the "picked" HTML node isn't your expected <select> HTML node, then the HTML node that you did actually picked might be the cause.

2. If you're using a non-standard <select> box and is rendering a custom one via divs or by some other means, then JavaScript might be at play, in which case you should watch the JavaScript console for any JS errors that may have either prevented event listeners from registering, or any JS errors that is triggered when tapping on the dropdown. If there is are no JS errors present, then I'd do the "Pick Element" test as described above.