Opened 8 months ago

Closed 7 months ago

#35321 closed Cleanup/optimization (fixed)

Django Admin in Mobile Safari zooms in on text inputs

Reported by: Simon Willison Owned by: Jason Hall
Component: contrib.admin Version: 5.0
Severity: Normal Keywords: css, accessibility, mobile
Cc: Thibaud Colas, Sarah Abderemane, Tom Carrick Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description

The Django Admin on Mobile Safari currently has a bug where tapping on an input field or textarea causes the screen to zoom in slightly, leaving the user to zoom back out again when they have finished editing.

This is related to a fix from a while ago where we ensured our meta viewport didn't restrict zooming - which was a good accessibility change! https://code.djangoproject.com/ticket/34617

We can fix the zoom by very slightly increasing the font-size used for these fields. 16px is the magic value that prevents Mobile Safari from zooming in on a selected field.

I've applied this fix to my own site using a custom template here: https://github.com/simonw/simonwillisonblog/blob/f5bf2f8fa035c62ef6b373d8237e9bc9e177052d/templates/admin/base_site.html

Here's a demo video I made on my iPhone: https://static.simonwillison.net/static/2024/mobile-safari-zoom-django-admin.mov

It shows two Django Admin instances. In the first half of the video I interact with the default admin, showing how tapping on input text and textarea fields zooms the screen in slightly.

In the second half of the video I interact with a customized version of the Admin that sets font-size: 16px on those fields. This removes the default zoom.

I think we should standardize on 16px for all form fields in the admin. I've patched a bunch of them on my own instance, but the one thing I haven't fixed yet is the select2 form field used for e.g. autocompleted tag entry.

Change History (14)

comment:1 by Simon Willison, 8 months ago

Here's where the font-size is set for those fields:

https://github.com/django/django/blob/6f7c0a4d66f36c59ae9eafa168b455e462d81901/django/contrib/admin/static/admin/css/responsive.css#L181-L196

It's set to font-size: 0.875rem as-of this change two years ago: https://github.com/django/django/commit/1f42a352e04d2e63117f067a1432594ffbb6a8b4 - which changed it from the previous font-size of 14px (still small enough to cause a zoom on Mobile Safari) to using rem values instead.

I believe 1rem would be the equivalent of 16px.

Here's the issue where px was swapped out for rem, to ensure browser font sizing worked correctly: https://code.djangoproject.com/ticket/33434

comment:2 by Simon Willison, 8 months ago

This change will likely have knock-on effects. Labels are currently set to 0.8125rem - should they be increased to 1rem too? https://github.com/django/django/blob/6f7c0a4d66f36c59ae9eafa168b455e462d81901/django/contrib/admin/static/admin/css/forms.css#L39-L43

comment:3 by Simon Willison, 8 months ago

I also found these "form defaults" here: https://github.com/django/django/blob/6f7c0a4d66f36c59ae9eafa168b455e462d81901/django/contrib/admin/static/admin/css/base.css#L471-L478

input, textarea, select, .form-row p, form .button {
    margin: 2px 0;
    padding: 2px 3px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.8125rem;
}

comment:4 by Mariusz Felisiak, 8 months ago

Cc: Thibaud Colas Sarah Abderemane Tom Carrick added
Triage Stage: UnreviewedAccepted
Type: UncategorizedCleanup/optimization

Thanks for the detailed report. I'll leave a specific fix to be discussed and confirmed by the Accessibility Team.

comment:5 by Almaz, 8 months ago

So, does this ticket requires some discussion before picking it up?

comment:6 by Tom Carrick, 8 months ago

16px is probably a good minimum for all (non-small) text in the admin, but I think restricting this to just labels for now to fix this issue is a good first step. 1rem is probably the way to go.

comment:7 by Jason Hall, 8 months ago

Owner: changed from nobody to Jason Hall
Status: newassigned

comment:8 by Jason Hall, 8 months ago

Then, can I just add this:

label {

font-size: 1rem;

}

to the base.css file in django/contrib/admin/static/admin/css folder? I guess I'll try that and see what happens.

comment:9 by Jason Hall, 8 months ago

Has patch: set

comment:10 by Mariusz Felisiak, 8 months ago

Has patch: unset

comment:11 by Mariusz Felisiak, 8 months ago

Has patch: set

comment:12 by Sarah Boyce, 7 months ago

Patch needs improvement: set

comment:13 by Sarah Boyce, 7 months ago

Patch needs improvement: unset
Triage Stage: AcceptedReady for checkin

comment:14 by Sarah Boyce <42296566+sarahboyce@…>, 7 months ago

Resolution: fixed
Status: assignedclosed

In 53719d6b:

Fixed #35321 -- Prevented Mobile Safari zoom-in on Django admin inputs.

Thanks Simon Willison for the report and Ben Cardy for testing.

Note: See TracTickets for help on using tickets.
Back to Top