Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/components/head/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Head = ( {

<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disabling zoom for webpages is generally frowned upon as zooming is often considered an accessibility feature. I suggest we avoid this.

iOS only performs the zoom-on-input-focus behavior for inputs with font sizes beneath 16px. Previous font size changes were made in #97374 to avoid the zoom as well. I suggest we pursue this approach instead.

From inspecting the current element styles, the font size is surprisingly calculated to be 14px, even though the Sass attempts to set it as 16px. @alshakero do you have ideas as to what is causing this rem miscalculation?

Image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disabling zoom for webpages is generally frowned upon as zooming is often considered an accessibility feature. I suggest we avoid this.

For your average webpage, I agree. For an application interface (especially inside a mobile app), it's unusual to be able to zoom in. If users complain about accessibility issues, we should solve that the same way we would for any other application accessibility problem – increase the font size or fix the layout.

iOS only performs the zoom-on-input-focus behavior for inputs with font sizes beneath 16px

The 16px threshold is an implementation detail that can change at any time – the fix from 9 months ago already doesn't work, so I'm reluctant to rely on something that can break again at any time.

If this is an issue, IMHO we should adopt the system text sizes per https://webkit.org/blog/3709/using-the-system-font-in-web-content/

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For your average webpage, I agree. For an application interface (especially inside a mobile app), it's unusual to be able to zoom in. If users complain about accessibility issues, we should solve that the same way we would for any other application accessibility problem – increase the font size or fix the layout.

My personal opinion is that it is not that clear cut. The line between application interface and document can be pretty blurry. Yes, some scenarios could be resolved with better design; other times, accessibility features are truly the most relevant and effective solution. There are a lot of disparate use cases for accessibility features.

Not a "hill I'm doing to die on" for this particular circumstance, but I still think it is misguided if alternatives exist.

The 16px threshold is an implementation detail that can change at any time – the fix from 9 months ago already doesn't work, so I'm reluctant to rely on something that can break again at any time.

If this is an issue, IMHO we should adopt the system text sizes per https://webkit.org/blog/3709/using-the-system-font-in-web-content/

Fair. It is unfortunate that (seemingly) a Sass utility intended to calculate rem based on explicit pixel values is not working as expected.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair. It is unfortunate that (seemingly) a Sass utility intended to calculate rem based on explicit pixel values is not working as expected.

Agreed – I'm going to merge this PR, but if we can get this reliably fixed by other means I'm happy to revert these changes.

This screen is many folks' first interaction with the app, and right now it appears broken so I want to solve that problem as quickly as we're able.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The back and forth continues! While it looks like the intention was to only disable zoom on the login screen, this actually disabled zoom throughout Calypso.

I'm re-enabling zoom here, but only for MSD, which should hopefully continue to satisfy the issue this PR was trying to fix.
#113337

MSD uses the core components, which ensure on mobile devices the font size is >= 16px so the zoom-on-focus thing doesn't happen. But I can only be sure we use core components on MSD, that's why it's enabled there.

There's no benefit to zooming in on this page

Fwiw I think this statement is too sweeping. While we may feel the elements on the page are large enough, users need the ability to zoom in up to 400%. They may be partially sighted, or perhaps only temporarily partially sighted. It's not a black and white thing of either a screen reader user, or a fully sighted user. There's lots in between.

<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
Expand Down
5 changes: 5 additions & 0 deletions client/login/wp-login/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@

$image-height: 47px;

/* Disable zoom on touch devices – this can cause login issues for apps */
body.is-section-login {
touch-action: pan-x pan-y;
Comment thread
dcalhoun marked this conversation as resolved.
}

.layout.is-section-login {
position: relative;
min-height: 100%; // Needed for any screen not yet using a StepContainerV2 wireframe (e.g. magic login).
Expand Down