Issues with input fields in ios with fixed container

Any help will be greatly appreciated. I have been struggling with this since a long time now.

I am facing two huge issues with iOS safari - I have a form built using ember with several input fields. This form is inside an iFrame which has position fixed. This iFrame is supposed to take up the whole space on the phone screen and background app should not be scrolling (or affected in any way) when I scroll this app.

Now, the issue is that when I focus on an input field, the form moves up and the blinking cursor (or the caret) shows on a completely different place -- see image attached.

Notice the cursor position - this was when I touched on first Name field

Also, at times, the form scrolls up and zooms out (I guess?) and the background app becomes visible. Also when I am scrolling down, I can sometimes see the background app at the bottom scrolling (see images attached)

this following image is when I touched on email address field - this is the background website on which the iframe is loaded on -- (the cursor can be sort of seen near the u of the museum)

[

---

---

this following image is when I zoomed out (by tapping twice) - the screen automatically adjusted to show the form (the jjj was typed correctly on email field)

Not sure if this is a known ios bug, or if this information will be enough for someone who faced a similar issue.

Note: I did use -webkit-overflow-scrolling: touch -- it solved the issue of form not scrolling with finger on input field, but not the issues I mentioned above.