Forms: Disable Auto Zoom on iPhone

[kacenka49]

Description:
When filling a form on iPhone with Safari/Opera, input zooms inand don´t go back.

To Reproduce:

1. Create a form with text fields long and short.
2. Open the form on iPhone with Safari.
3. Tap into input some text in the field, the keyboard will appear.
4. The screen zooms into the field hiding part of the label and also the "send" button.
5. Unselect filed, the keyboard will hide now.
6. Try to zoom out back (hardly possible).

Expected behavior:
Zooms out when unselected, or not zoom in (like on other smartphones)

System:
Nextcloud 19.0.1
Forms 2.0.0-beta.4
iOS 13.5.1

Reason:
As I looked for the bug and what it cause I found out that this behavior is known on iPhones: https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
The reason is input text smaller than 16px.

Solutions:
As suggested on StackOverflow, make text bigger for Iphones or disable all zooming on the form page.

Example:

I would try to tweak CSS myself, but not found the right way.

[skjnldsv]

cc @jancborchardt

[jancborchardt]

As I looked for the bug and what it cause I found out that this behavior is known on iPhones: https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
The reason is input text smaller than 16px.

So then it would make sense to have a base font size of 16px at least for the content area of Forms?

This is something we can explore in the other apps via the components as well – 16px for base font size is something we need to look into anyway. Right now it’s 14px, which we arrived at from recently upping it. Trying out 15px it was a bit too much, but if we size other elements accordingly it would work too of course.

[kacenka49]

Yes, the easiest solution would be just to enlarge the base form font to be at least 16px on input fields.
But as I'm not a big fan of what apple trying to do here, I would suggest trying the solution mentioned here: https://stackoverflow.com/a/29826051. This way display should zoom-out after the input is out of focus.

[jancborchardt]

@skjnldsv @jotoeri what do you think? The Stackoverflow as a quick win seems ok, then we don’t need to modify the whole font size and be inconsistent there for everything just because of iOS Safari?

[skjnldsv]

@skjnldsv @jotoeri what do you think? The Stackoverflow as a quick win seems ok, then we don’t need to modify the whole font size and be inconsistent there for everything just because of iOS Safari?

I'm fine with this :+1:
If the ui fits enough, zooming makes no sense.

[jotoeri]

@skjnldsv @jotoeri what do you think? The Stackoverflow as a quick win seems ok, then we don’t need to modify the whole font size and be inconsistent there for everything just because of iOS Safari?

Hm, depends on which one you mean... Not using jQuery in general, but using it to fix on forms, what is basically a Safari-Bug seems not reasonable to me...

Just found this one to only change the viewport if on iOS - @skjnldsv is that usable in your opinion? (Could of course be written a bit more beautiful)
https://stackoverflow.com/a/57527009

Alternatively we could move the submit-button to the left (like the add-question-button) making it at least possible to submit the form on zoomed-in state.

• Btw: Is this only on forms a problem? How do other apps avoid that zooming on input-fields? 🤔

[skjnldsv]

• How do other apps avoid that zooming on input-fields? thinking

I guess it's the same everywhere :thinking:

[idecable]

https://stackoverflow.com/a/29826051

I went in:

apps/forms/templates/main.php

and I added

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

inside the div at the bottom of that file, and that was it!

As follows:

<div id="content"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /></div>

Not zooming in iPhone anymore, good enough for me!

Thanks kacenka49 for the initial suggestion.