0

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.

Nikita Jajodia
  • 4,220
  • 3
  • 21
  • 29
  • @jDev1985 added that it seems to even work outside of an iframe on IOS 11.3 for iPhone 7 and 8. – jotasi May 10 '18 at 11:16

1 Answers1

0

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;
}
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
jDev1985
  • 11
  • 3