From 30ba6b631c91cad75af56218df15d80c0b07af16 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Tue, 21 Oct 2025 13:12:42 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Fix=20iOS=20PWA=20keyboard=20not?= =?UTF-8?q?=20appearing=20on=20input=20focus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The iOS keyboard wasn't appearing when tapping input fields in the installed PWA due to touch-action: manipulation applied globally to the html element. Changes: - Moved touch-action: manipulation from html element to buttons/interactive elements only - Added touch-action: auto for input/textarea/select to ensure iOS keyboard appears - Added interactive-widget=resizes-content to viewport meta for better keyboard handling This follows iOS best practices where touch-action should be scoped to specific interactive elements rather than applied globally, which can interfere with native input behavior in PWA/home screen mode. --- index.html | 5 ++++- src/App.tsx | 11 +++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5d9e0c412..a6b02033b 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,10 @@ - + diff --git a/src/App.tsx b/src/App.tsx index 91472d03f..9ac8849c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -64,8 +64,6 @@ const globalStyles = css` html { /* Prevent text size adjustment on orientation change */ -webkit-text-size-adjust: 100%; - /* Improve tap responsiveness */ - touch-action: manipulation; } body { @@ -79,6 +77,15 @@ const globalStyles = css` [role="button"] { min-height: 44px; min-width: 44px; + /* Improve tap responsiveness on buttons only */ + touch-action: manipulation; + } + + /* Ensure input elements allow default touch behavior for iOS keyboard */ + input, + textarea, + select { + touch-action: auto; } }