htmlioscssapp-preview

Input focus issue on iPhone

First off, after doing some research I am aware of previous issues relating to input fields causing issues on iOS. However, apparently this was fixed in iOS update 11.3. The device I am using for testing is an iPhone 5s running iOS 11.4.1.

I have created an html document (includes css and JS) and it is stored on the Google Cloud Platform here. If you open this link on either an Android or iPhone, everything displays and works as intended.

I am using AppPresser to create a mobile app. A page of the app loads the Google Cloud link and displays it with no issues. AppPresser provides a previewer app that can be installed on a device for testing the current app build. On an Android device, the html page still works perfectly as intended, but there are issues when testing on an iPhone. Here are some screenshots:

If the "Purchasing Price" input is focussed while at the bottom of the screen, it moves to the top as space is made for the keyboard.

Before:

enter image description here

After:

enter image description here

However, if the "Purchasing Price" input field is near the top of the screen and it is focused, everything seems to go haywire. The container vanishes and a previous container is shown. The user cannot see what data they are entering.

Before:

enter image description here

After:

enter image description here

I find this issue to be very strange, especially as the html page works perfectly on an iPhone when opened directly through the browser. Any feedback would be much appreciated.

Thanks

Solution

  • I thought I had tried all the fixes provided online, but adding the following css:

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

    from this article, did the trick! I am still confused by two things that maybe someone can clear up for me.

    1. Why did this issue only happen when previewing my app build, and not when loading the html file directly through the iPhone's browser (file is hosted on the Google Cloud Platform).
    2. Why did I have to implement a fix for this, when apparently the input issues were addressed in iOS update 11.3