1467525 - FxA login page zooms viewport when focusing on form fields

Status: RESOLVED FIXED

(Cloud Services :: Server: Firefox Accounts, defect)

Description

[Justin D'Arcangelo [:justindarc]]

Attachment: Screen Shot 2018-06-07 at 2.02.49 PM.png

See screenshot.

Comment 1

[Shane Tomlinson [:stomlinson]]

Thanks for the report Justin!

This comes up pretty often, the original reason we did not disable zoom is
to allow folks with visual impairments to be able to zoom in on the UI:

https://github.com/mozilla/fxa-content-server/issues/2228

I'm deeply uncomfortable totally disabling zoom, but am willing to be convinced otherwise if
an a11y expert (cc'd :MarcoZ) tells me I'm being silly and system level accessibility controls 
are sufficient.

We have considered setting the max zoom level to 2, though inertia has kept us from actually
doing anything.

:MarcoZ - what are best practices for zoom levels? Is it OK to disable zoom on mobile devices
and instead rely upon system level controls to help users with visual impairments?

Comment 2

[Marco Zehe (:MarcoZ)]

(In reply to Shane Tomlinson [:stomlinson] from comment #1)
> :MarcoZ - what are best practices for zoom levels? Is it OK to disable zoom
> on mobile devices
> and instead rely upon system level controls to help users with visual
> impairments?

Nope. Every person with just a little visual problem, or aging people which there are a lot of in the Mozilla community by now, will appreciate the ability to pinch to zoom. Disabling that will actually force them to use the builtin zoom, which is not OK if they can otherwise still use the mobile device fine. See here, for an example reasoning why pinch to zoom should never be prevented on mobile devices:

* https://medium.com/@julianbez/4-reasons-not-to-disable-zoom-in-your-responsive-design-ad582c16a1c
* http://adrianroselli.com/2015/10/dont-disable-zoom.html

Comment 3

[Justin D'Arcangelo [:justindarc]]

I understand the accessibility reasons for not disabling zoom on web content. However, in this case, this login screen is presented as if it were a native view in a native app. As soon as the user taps to focus a field, the entire form is slightly zoomed in automatically leading to an unexpected UX. At the very least, the viewport should not auto zoom when focusing on a form field.

Comment 4

[Justin D'Arcangelo [:justindarc]]

Renaming the bug to clarify that the issue is not with the page's ability to pinch-to-zoom, but that the entire viewport zooms automatically when focusing on the form fields.

Comment 5

[Justin D'Arcangelo [:justindarc]]

I just inspected the DOM for this form and it appears to be using the following viewport:

width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes

That's fine, but the form fields have a `font-size` of `15px` which is what is actually causing the web view to zoom when focusing. If that `font-size` is at least `16px`, the page will not zoom the viewport when focusing on the form fields. I just tested this by messing with the `font-size` in the web inspector to verify.

Comment 6

[Shane Tomlinson [:stomlinson]]

(In reply to Justin D'Arcangelo [:justindarc] from comment #5)

> That's fine, but the form fields have a `font-size` of `15px` which is what
> is actually causing the web view to zoom when focusing. If that `font-size`
> is at least `16px`, the page will not zoom the viewport when focusing on the
> form fields. I just tested this by messing with the `font-size` in the web
> inspector to verify.

This is the most useful tip I have seen all week. Thank you :justindarc!

Comment 7

[Shane Tomlinson [:stomlinson]]

I updated the component to "Cloud Services->Server: Firefox Accounts" so this is tracked by our Github mirror.

Comment 8

[Marco Zehe (:MarcoZ)]

(In reply to Justin D'Arcangelo [:justindarc] from comment #3)
> I understand the accessibility reasons for not disabling zoom on web
> content. However, in this case, this login screen is presented as if it were
> a native view in a native app. As soon as the user taps to focus a field,
> the entire form is slightly zoomed in automatically leading to an unexpected
> UX. At the very least, the viewport should not auto zoom when focusing on a
> form field.

Sorry for my derailing. This wasn't at all clear from the initial report, at least to me. The missing piece: I cannot see the screenshot. I am blind. Glad this is cleared up now. :)

Comment 9

[Shane Tomlinson [:stomlinson]]

This should be fixed by https://github.com/mozilla/fxa-content-server/pull/6274 where we set the input element font-size to 16px. Fix will go into production the week of June 18th.