diff --git a/app/hooks/useVisualViewport.ts b/app/hooks/useVisualViewport.ts
index 0acec7743..f579df0fc 100644
--- a/app/hooks/useVisualViewport.ts
+++ b/app/hooks/useVisualViewport.ts
@@ -1,9 +1,12 @@
 import * as React from "react";
+import { keyboardIsOpen } from "~/utils/visual-viewport";
 
 const HEIGHT_PROPERTY = "--visual-viewport-height";
 const OFFSET_TOP_PROPERTY = "--visual-viewport-offset-top";
+const KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
 
-// Syncs the ACTUAL visual viewport to two CSS variables so elements can respect the space taken by the mobile keyboard
+// Syncs the ACTUAL visual viewport to two CSS variables (and whether the mobile keyboard is open to an attribute on <html>)
+// so elements can respect the space taken by the mobile keyboard
 // (not written on mount: until the viewport changes the CSS fallbacks match, and every write restyles the whole document)
 export function useVisualViewport() {
 	React.useEffect(() => {
@@ -23,6 +26,10 @@ export function useVisualViewport() {
 			const style = document.documentElement.style;
 			style.setProperty(HEIGHT_PROPERTY, `${height}px`);
 			style.setProperty(OFFSET_TOP_PROPERTY, `${offsetTop}px`);
+			document.documentElement.toggleAttribute(
+				KEYBOARD_OPEN_ATTRIBUTE,
+				keyboardIsOpen(),
+			);
 		};
 
 		viewport.addEventListener("resize", update);
@@ -33,6 +40,7 @@ export function useVisualViewport() {
 			viewport.removeEventListener("scroll", update);
 			document.documentElement.style.removeProperty(HEIGHT_PROPERTY);
 			document.documentElement.style.removeProperty(OFFSET_TOP_PROPERTY);
+			document.documentElement.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
 		};
 	}, []);
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index 2d0942e2a..1f53e2237 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -670,27 +670,10 @@
 	place-items: center;
 }
 
-/* iOS can't pin the tab bar on top of the virtual keyboard, so it gets out of the way while typing */
-@media (pointer: coarse) {
-	body:has(
-		:is(
-				input:is(
-					:not([type]),
-					[type="text"],
-					[type="search"],
-					[type="email"],
-					[type="url"],
-					[type="tel"],
-					[type="password"],
-					[type="number"]
-				),
-				textarea,
-				[contenteditable]:not([contenteditable="false"])
-			):not([readonly], [inputmode="none"]):focus
-	) {
-		--mobile-nav-height: 0px;
-		--mobile-tab-bar-display: none;
-	}
+/* iOS can't pin the tab bar on top of the virtual keyboard, so it gets out of the way while the keyboard is open */
+html[data-keyboard-open] body {
+	--mobile-nav-height: 0px;
+	--mobile-tab-bar-display: none;
 }
 
 @media screen and (max-width: 599px) {
diff --git a/app/utils/visual-viewport.ts b/app/utils/visual-viewport.ts
index 2567a4dca..4da6da26b 100644
--- a/app/utils/visual-viewport.ts
+++ b/app/utils/visual-viewport.ts
@@ -44,5 +44,7 @@ export function keyboardIsOpen() {
 	const viewport = window.visualViewport;
 	if (!viewport) return false;
 
-	return window.innerHeight - viewport.height > KEYBOARD_MIN_HEIGHT;
+	return (
+		window.innerHeight - viewport.height * viewport.scale > KEYBOARD_MIN_HEIGHT
+	);
 }