Issue in iOS while filling a form in iframe

Question

I have an iframe which contains a form. Everything works fine in desktop and android devices and also in iPads. But in case of iphone 8+ and iphone 7, iOS - 11.3, the moment I start typing inside any field - text field or textarea in this iframe, the page is scrolled to the bottom automatically, so the user is not able to see the data he/ she is entering in the field. This is happening for both Safari and chrome in iOS. iframe is initialised as follows:

<iframe ng-src="myUrl" ng-if="model.seat.survey_url" width="100%" height="100%" border="0" style="border-style: none; height:100%;overflow:hidden;width: 100%;" scrolling="no"></iframe>

This iframe is loaded inside the bootstrap modal and angularjs has been used.

Answer 1

Try the adding the following CSS to the parent page if you are able, it fixed the same issue for me.

html, body {
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}