All Docs
FeaturesMaking Tax DigitalUpdated February 27, 2026

Fix: iOS Safari Auto-Zoom on Bulk Recategorise Select

Fix: iOS Safari Auto-Zoom on Bulk Recategorise Select

Release: v1.0.137
Affected component: BulkRecategoriseBar — Transaction Ledger
Platform: iOS Safari (and other iOS browsers using WebKit)

What Was the Problem?

When landlords used the bulk recategorisation feature on an iOS device — selecting multiple transactions and choosing a category from the BulkRecategoriseBar — iOS Safari would automatically zoom in on the page as soon as the select dropdown was tapped.

This is a well-known iOS Safari behaviour: any <input>, <select>, or <textarea> element with a computed font size below 16px (1rem) will cause the browser to automatically zoom the viewport to make the element easier to interact with. The zoom is not triggered by the user; it happens automatically on focus and does not always reset cleanly, leaving the page in a zoomed state.

The root cause was that the select element in BulkRecategoriseBar was styled with Tailwind's text-sm class (14px) and had no mobile-specific font-size override to meet the 16px threshold.

Affected file:

src/app/dashboard/transactions/transaction-ledger.tsx

What Changed?

The Tailwind class applied to the <select> element in BulkRecategoriseBar was updated from:

<!-- Before -->
<select class="text-sm ...">

to:

<!-- After -->
<select class="text-base sm:text-sm ...">

Why text-base sm:text-sm?

BreakpointClassFont SizeiOS Auto-Zoom?
Mobile (default)text-base16px✅ No
Small screens and abovesm:text-sm14pxN/A (desktop Safari does not auto-zoom)

Using text-base as the default ensures the select meets iOS Safari's 16px threshold on mobile. The sm:text-sm override restores the original smaller size on tablet and desktop viewports where auto-zoom is not a concern, preserving the visual design on larger screens.

Who Is Affected?

This fix applies to all users accessing the Transaction Ledger on iOS devices (iPhone and iPad) using Safari or any other browser built on WebKit (all iOS browsers are required to use WebKit). It specifically affects users who:

  1. Navigate to Dashboard → Transactions.
  2. Select one or more transactions to trigger the BulkRecategoriseBar.
  3. Tap the category <select> dropdown to assign or change a category.

General Guidance for iOS Form Elements

This is a common pitfall when building responsive web applications targeting iOS. As a rule, any interactive form element (<input>, <select>, <textarea>) should have a font size of at least 16px on mobile breakpoints to prevent Safari's auto-zoom behaviour. In Tailwind CSS projects, the pattern text-base sm:text-sm (or text-base md:text-sm) is the standard mitigation.