Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Zooming and scaling does not work properly on mobile devices #110

Closed
jakubmiarka opened this issue Sep 13, 2019 · 2 comments · Fixed by #155
Closed

Zooming and scaling does not work properly on mobile devices #110

jakubmiarka opened this issue Sep 13, 2019 · 2 comments · Fixed by #155
Labels
accessibility accessibility-statement

Comments

@jakubmiarka
Copy link
Contributor

The scaling and zooming on mobile devices is disabled:

tech-docs-gem/lib/source/layouts/core.erb

Line 6 in 6c44ea2

<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

This fails WCAG 2.1 - 1.4.4 Resize text Level AA criterion.
@36degrees
Copy link
Contributor

From memory, this is because of the sticky 'table of contents' on mobile, and the peculiar way that sticky elements scale and position themselves when zooming (I think there may also have been issues with the table of contents overlay that appears)

As a lot of the tech docs using this format are now split across multiple pages, it may be that the table of contents overlay can be redesigned or removed, but this isn't a trivial change and IMHO needs to be designed and researched.

@NickColley NickColley changed the title Scaling and zooming is disabled Zooming and scaling does not work properly on mobile devices Oct 15, 2019
@NickColley
Copy link
Contributor

Testing this on Android Chrome, it lets you zoom regardless of if we've turned it off.

Will need to test on more devices to see what the behaviour is.

@NickColley NickColley mentioned this issue Nov 1, 2019
Closed
NickColley added a commit that referenced this issue Nov 12, 2019
@NickColley
Ensure the page can be pinch to zoomed
6512627 
I've tested in latest versions of iOS and Android.

- iOS v10 onwards ignores disabling pinch to zoom
- Android does not ignore disabling pinch to zoom, although the user can override this.

I have not been able to introduce any negative impact for removing pinch to zoom, the interface scales proportionally and does not obstruct anything. So given that iOS already ignores this I think we should allow this for all users.

This is also a WCAG accessibility requirement.

Fixes #110
@NickColley NickColley mentioned this issue Nov 12, 2019
Merged
NickColley added a commit that referenced this issue Nov 14, 2019
@NickColley
Ensure the page can be pinch to zoomed
976e316 
I've tested in latest versions of iOS and Android.

- iOS v10 onwards ignores disabling pinch to zoom
- Android does not ignore disabling pinch to zoom, although the user can override this.

I have not been able to introduce any negative impact for removing pinch to zoom, the interface scales proportionally and does not obstruct anything. So given that iOS already ignores this I think we should allow this for all users.

This is also a WCAG accessibility requirement.

Fixes #110
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility accessibility-statement
Projects
GOV.UK Design System cycle board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Ensure the page can be pinch to zoomed alphagov/tech-docs-gem
3 participants
@36degrees @NickColley @jakubmiarka