Skip to content

fix: prevent iOS composer focus zoom#1562

Open
gigq wants to merge 1 commit intopingdotgg:mainfrom
gigq:fix/ios-composer-focus-zoom
Open

fix: prevent iOS composer focus zoom#1562
gigq wants to merge 1 commit intopingdotgg:mainfrom
gigq:fix/ios-composer-focus-zoom

Conversation

@gigq
Copy link
Copy Markdown

@gigq gigq commented Mar 30, 2026

What Changed

Prevents the chat composer from triggering iOS Safari's automatic page zoom when the editor is focused on mobile.
The fix does two things:

  • Sets the composer editor text size to 16px on coarse-pointer devices, which avoids the common iOS auto-zoom trigger.
  • Adds a small iOS-specific focus guard that temporarily locks the viewport while the composer is focused, then restores the original viewport
    settings on blur.
    This is scoped only to the composer and includes a small unit test for the viewport helper.

Why

On iPhone, tapping into the composer caused the page to zoom in slightly when the keyboard opened, which left the UI at the wrong zoom level
afterward and made the mobile experience feel broken.
This approach keeps the fix narrow:

  • It only affects the composer, not the whole app.
  • It preserves the normal viewport configuration outside of composer focus.
  • It handles iOS/iPadOS specifically instead of applying a global zoom restriction.

UI Changes

Behavior change only. The composer no longer causes the page to zoom when focused on iPhone.

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes
ScreenRecording_03-29-2026.20-19-55_1.mp4
ScreenRecording_03-29-2026.20-23-01_1.mp4

Note

Medium Risk
Adds iOS-specific viewport meta manipulation on focus/blur and adjusts editor font sizing; mistakes could impact mobile zoom/scroll behavior if the viewport content isn’t restored correctly.

Overview
Prevents iOS Safari from auto-zooming when the chat composer is focused by raising the composer font size to 16px on coarse-pointer devices and wiring new focus/blur/touch handlers into ComposerPromptEditor.

Introduces a new usePreventIosInputZoom hook that, on iOS/iPadOS, temporarily locks the page viewport (maximum-scale=1, user-scalable=no) while the editor is focused and restores the original viewport on blur/unmount, with unit tests covering platform detection and viewport content rewriting.

Written by Cursor Bugbot for commit 5df2283. This will update automatically on new commits. Configure here.

Note

Prevent iOS composer input zoom by locking viewport on focus

  • Adds a usePreventIosInputZoom hook that mutates the viewport meta tag (maximum-scale=1, user-scalable=no) when a focusable element is focused on iOS/iPadOS, restoring the original viewport on blur.
  • Detects iOS/iPadOS via user agent or MacIntel platform with multiple touch points.
  • Sets the composer font size to 16px on coarse-pointer devices (preventing iOS auto-zoom) and 14px otherwise, replacing the hardcoded text-[14px] Tailwind class.
  • Risk: Setting user-scalable=no temporarily disables pinch-to-zoom globally while the composer is focused, which may affect accessibility.

Macroscope summarized 5df2283.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 30, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1518db9e-a353-4a4c-8045-76ff5182d0c4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added size:L 100-499 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant