App zooms when keyboard displayed but does not zoom back

Hi, I am working in the Personal Environment just starting with Outsystems and evaluating it for our business. I created a basic Reactive app. Added nothing more than a preset dashbaord as the Home screen and published the app. I got a Login screen noticed the following on my mobile device (iPhone 7 plus):

Images

Image 1: Start up Login screen, note blue border


Image 2: Clicked into the Username/Password fields and entered details. Keyboard appears and Login screen zooms in.. Blue border has gone away. That behaviour is fine I suppose it helps to see what is being typed.


Image 3: Clicked "Done" on Keyboard (don't have to do this) and notice that the screen does not zoom back showing the "full screen" with the blue boarder on the sides.


Image 4: Click "Login" and the app proceeds to the home screen. However the home screen maintains the "zoomed" in effect. The heading and other elements on the screen are not showing properly.


Image 5: The app home screen should naturally look like this and I don't think the user should have to pinch zoom out to display it properly. 


Other webapps that I have used (mainly banking webapps) don't zoom in when the keyboard is used or zoom back to normal size when the keyboard has gone. In my test app once the zoomed login page authentication is done the remaining webpages are still zoomed in and are not shown properly and it requires the user to pinch zoom out too see the app properly which is not the best experience.

Just wondering if I am doing something wrong - note I have not written a line of code or made any changes to configuration other than added one dashboard to the module. Is there an option/setting I am missing.

Thanks

Glenn 

Hi Glenn,

Can you please confirm that have got any warning before adding Dashboard template.

looks like you are visiting the application in mobile Browser, can you try with Outsystems Now android app to view your application.

Regards,

Manikandan K 

Manikandan K wrote:

Hi Glenn,

Can you please confirm that have got any warning before adding Dashboard template.

looks like you are visiting the application in mobile Browser, can you try with Outsystems Now android app to view your application.

Regards,

Manikandan K 

Hi,

Thanks for the speedy reply. Created a new project - Test3. Started a Reactive project.Dropped a new screen onto the page.Got the list of all the templates I can add the the screen. There is no error before adding the dashboard template - image below


I then added the dashboard and a text box below the chart. I added the text box for somewhere to touch and bring up the mobile keyboard.I also made the app require no authentication. No errors in the compile below.


You can see in my compiled Reactive Web app at https://planning.outsystemscloud.com/Test3 on a mobile web browser (Safari or Chrome) that when you scroll to the bottom of the screen (under the chart) and touch in the text box you get the keyboard pop up at the bottom. The app zooms in... you can type something into the text box... select "Done"... they keyboard disappears but the app is still zoomed in. If you scroll to the top you will see that the app title and other components are not displayed properly on the screen. You have to pinch zoom out to adjust the screen to display properly.

I don't have an android device with me at the moment. I will test this basic app on android tomorrow. But this is the behavior I get on iOS (latest version) on my Iphone 7 plus, running chrome or safari mobile browser.

Thanks for your help and any advice/thoughts is greatly appreciated.

Regards

Glenn

Hi Glenn,

Had a look in Android device am unable to see this error.

if you are facing in iOS, if you still unable to solve it, kindly raise a support ticket to outsystems, sure they will help you on this to sort out.

Regards,

Manikandan K

Manikandan K wrote:

Hi Glenn,

Had a look in Android device am unable to see this error.

if you are facing in iOS, if you still unable to solve it, kindly raise a support ticket to outsystems, sure they will help you on this to sort out.

Regards,

Manikandan K

Hi Manikandan,

I tested the basic app https://planning.outsystemscloud.com/Test3 on a number of Android phones and it is not a problem.

Indeed it does seem to be on iOS at least my iphone 7 plus with the latest iOS version. I have tested it on 3 iphone 7 plus phones.  I think it is an issue specific to the Outsystems style/web app code because when on my phone I use text boxes in web apps for large companies such as the following and they must have some style/code which tells the iOS not to zoom when the keyboard is present. Note these web apps do not zoom in on text input on my iphone 7: 

Banking:

https://banking.westpac.com.au/wbc/banking/handler?TAM_OP=login&segment=personal&logout=false

Insurance:

https://www.insuranceonline.nrma.com.au/oss/GTConnect/UnifiedAcceptor/SelfServiceCentre.Main/brandId/nrma


Here is a video of how this basic app (described above) looks like on my iphone when entering text:

https://1drv.ms/v/s!AudzVeZsvYy1o3nA9H-zFtR_6cbA?e=TeW9t1


Thanks for your advice I will raise a support ticket. Hopefully it's not something I am doing wrong :-)

Regards

Glenn

Glenn D wrote:

Manikandan K wrote:

Hi Glenn,

Had a look in Android device am unable to see this error.

if you are facing in iOS, if you still unable to solve it, kindly raise a support ticket to outsystems, sure they will help you on this to sort out.

Regards,

Manikandan K

Hi Manikandan,

I tested the basic app https://planning.outsystemscloud.com/Test3 on a number of Android phones and it is not a problem.

Indeed it does seem to be on iOS at least my iphone 7 plus with the latest iOS version. I have tested it on 3 iphone 7 plus phones.  I think it is an issue specific to the Outsystems style/web app code because when on my phone I use text boxes in web apps for large companies such as the following and they must have some style/code which tells the iOS not to zoom when the keyboard is present. Note these web apps do not zoom in on text input on my iphone 7: 

Banking:

https://banking.westpac.com.au/wbc/banking/handler?TAM_OP=login&segment=personal&logout=false

Insurance:

https://www.insuranceonline.nrma.com.au/oss/GTConnect/UnifiedAcceptor/SelfServiceCentre.Main/brandId/nrma


Here is a video of how this basic app (described above) looks like on my iphone when entering text:

https://1drv.ms/v/s!AudzVeZsvYy1o3nA9H-zFtR_6cbA?e=TeW9t1


Thanks for your advice I will raise a support ticket. Hopefully it's not something I am doing wrong :-)

Regards

Glenn

No answer yet from Outsystems support.


Hi Glenn,

After searching a bit on stack overflow I suggest that you do this:

Not sure if it works, as I was not able to reproduce the issue you are describing with my iPhone (X, 13.4), but it may be worth a try. 

Let me know if it works.

Cheers,
Tiago Simões


Tiago Simões wrote:

Hi Glenn,

After searching a bit on stack overflow I suggest that you do this:

Not sure if it works, as I was not able to reproduce the issue you are describing with my iPhone (X, 13.4), but it may be worth a try. 

Let me know if it works.

Cheers,
Tiago Simões


Hi Tiago,

Thank you for your reply... much appreciated. I had a read of the stack overflow article and others relating to iOS zooming in on text boxes. Its certainly strange that iPhone X does not show the issue. I will ask my friends with better phones than mine (iPhone 7) if they get the same as me when using this app: https://planning.outsystemscloud.com/Test3

I tried what you suggested and it has not worked. The change is currently in the version of the Test3 app hyperlinked above.

However what is interesting is that reading the stack overflow told me that the issue on zooming is to do with iOS zooming on input text entry when the font size of the input text is less than 16px. Really?? I tested it and yep when I changed the text area size from the default --font-size-s: 14px; to 16px the zooming in on text entry stopped. 

In my test app: https://planning.outsystemscloud.com/Test3 I have now put two text area boxes one with the default 14px and the other with 16px font size. One zooms in on text entry the other does not.

At least I now know what is causing the problem. I am not technical enough to come up with the best solution. I can change all --font-size-s to 16px in size for my whole app in the theme style but I don't think this is the best answer. I am interested if its only an issue on older iPhones and not newer ones like yours. I'll check. That sounds really strange to me but also I find it VERY strange (just like the contributors on stack overflow) that Apple iOS would determine that text under 16px in size automatically requires a zoom. It does not do this by default on Android. 

Any other suggestions?

By the way I have raised a ticket with Outsystems support as well.. no response yet.

Thanks

Glenn

Hi Glenn,

Indeed I was recently told that at OutSystems we are working on converging our reactive and mobile app templates and themes and in fact one of the changes we are evaluating is having inputs with 16px font size (at least in smartphones, using responsive css) to mitigate that issue (and also because limiting viewport settings is not accessibility compliant).

So I would say you are on the right path, this is an iOS issue and that is the way to go.

Cheers,
Tiago Simões

PS: I may have tested wrong, it may not be dependent on the iPhone version. Yup, I was told about that support ticket, I'm answering here so others can benefit from your investigation.



Tiago Simões wrote:

Hi Glenn,

Indeed I was recently told that at OutSystems we are working on converging our reactive and mobile app templates and themes and in fact one of the changes we are evaluating is having inputs with 16px font size (at least in smartphones, using responsive css) to mitigate that issue (and also because limiting viewport settings is not accessibility compliant).

So I would say you are on the right path, this is an iOS issue and that is the way to go.

Cheers,
Tiago Simões

PS: I may have tested wrong, it may not be dependent on the iPhone version. Yup, I was told about that support ticket, I'm answering here so others can benefit from your investigation.



Hi Tiago,

I suppose the zoom in function is a good thing if only it would zoom back to normal after the text area lost focus or the keyboard goes away. I suppose there is no way to determine if the screen/app is zoomed in and then to zoom back when the text entry is finished?


Hi Glenn,

From what I've seen that is not very trivial.

Cheers,
Tiago Simões