adam/Remote-Terminal-for-MeshCore
1
0 Fork 0
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-10-30 22:41:57 +01:00
Code Issues 26 Packages Projects Releases Wiki Activity

Bug: On-screen keyboard overlays chat input on iOS (iPhone) #169

New Issue
Closed
opened 2026-10-05 02:01:39 +02:00 by adam · 6 comments
adam commented 2026-10-05 02:01:39 +02:00
Owner
Copy link
Copy source

Description

On iOS (iPhone Safari and WKWebView-based apps), focusing the channel chat text input causes the on-screen keyboard to appear but it overlays the input field rather than pushing it up. The result is the user cannot see what they are typing.

Steps to reproduce

  1. Open RemoteTerm on an iPhone (Safari or any WKWebView-based browser/app)
  2. Navigate to a channel conversation
  3. Tap the message input field
  4. On-screen keyboard appears — the input field is hidden behind it

Expected behaviour

The layout adjusts when the keyboard appears so the input field remains visible above the keyboard.

Root cause

The ConversationPane layout uses a standard flexbox column with no handling for the iOS virtual keyboard viewport change. When the keyboard appears, iOS reduces the visual viewport but the app does not detect or respond to this. Specifically:

  • No visualViewport API usage to detect keyboard height
  • No scrollIntoView() called on the input when it receives focus
  • No CSS viewport units that account for keyboard height (dvh/svh would handle this on iOS 15.4+)
  • The <meta name="viewport"> tag does not help here — iOS WebKit does not automatically push fixed/flex layouts above the keyboard the way Android does

Possible fixes

  • CSS approach (simplest): Use height: 100dvh (dynamic viewport height) on the root container instead of 100vh — on iOS 15.4+ this automatically shrinks when the keyboard is visible, which causes the flex layout to push the input above the keyboard.
  • JS approach (broader support): Listen on window.visualViewport resize events and adjust the container height or scroll the input into view on focus — covers older iOS versions.
## Description On iOS (iPhone Safari and WKWebView-based apps), focusing the channel chat text input causes the on-screen keyboard to appear but it overlays the input field rather than pushing it up. The result is the user cannot see what they are typing. ## Steps to reproduce 1. Open RemoteTerm on an iPhone (Safari or any WKWebView-based browser/app) 2. Navigate to a channel conversation 3. Tap the message input field 4. On-screen keyboard appears — the input field is hidden behind it ## Expected behaviour The layout adjusts when the keyboard appears so the input field remains visible above the keyboard. ## Root cause The `ConversationPane` layout uses a standard flexbox column with no handling for the iOS virtual keyboard viewport change. When the keyboard appears, iOS reduces the visual viewport but the app does not detect or respond to this. Specifically: - No `visualViewport` API usage to detect keyboard height - No `scrollIntoView()` called on the input when it receives focus - No CSS viewport units that account for keyboard height (`dvh`/`svh` would handle this on iOS 15.4+) - The `<meta name="viewport">` tag does not help here — iOS WebKit does not automatically push fixed/flex layouts above the keyboard the way Android does ## Possible fixes - **CSS approach (simplest):** Use `height: 100dvh` (dynamic viewport height) on the root container instead of `100vh` — on iOS 15.4+ this automatically shrinks when the keyboard is visible, which causes the flex layout to push the input above the keyboard. - **JS approach (broader support):** Listen on `window.visualViewport` resize events and adjust the container height or scroll the input into view on focus — covers older iOS versions. <!-- github-sync-id:4346344685 -->
adam closed this issue 2026-10-05 02:01:39 +02:00
adam commented 2026-10-05 02:01:40 +02:00
Author
Owner
Copy link
Copy source

Just pushed up a fix; I don't have an iPhone but lemme know if that fixes it for you

Just pushed up a fix; I don't have an iPhone but lemme know if that fixes it for you <!-- github-comment-id:4339316587 -->
adam commented 2026-10-05 02:01:41 +02:00
Author
Owner
Copy link
Copy source

Unfortunately the issue persists. I’ll do some local testing to see if I can find a fix and will report back.

Unfortunately the issue persists. I’ll do some local testing to see if I can find a fix and will report back. <!-- github-comment-id:4339547870 -->
adam commented 2026-10-05 02:01:42 +02:00
Author
Owner
Copy link
Copy source

Ahh kk I have some company coming over tonight; maybe I can borrow an iphone haha

Ahh kk I have some company coming over tonight; maybe I can borrow an iphone haha <!-- github-comment-id:4339707341 -->
adam commented 2026-10-05 02:01:42 +02:00
Author
Owner
Copy link
Copy source

I did some testing with a local build again your fix is working. It doesn't work though when running under Home Assistant supervisor. I'm exploring a fix for that.

I did some testing with a local build again your fix is working. It doesn't work though when running under Home Assistant supervisor. I'm exploring a fix for that. <!-- github-comment-id:4348066060 -->
adam commented 2026-10-05 02:01:43 +02:00
Author
Owner
Copy link
Copy source

That's probably just because I haven't rebuilt the image yet and pushed a new version. I'll do that tomorrow once I'm back home.

That's probably just because I haven't rebuilt the image yet and pushed a new version. I'll do that tomorrow once I'm back home. <!-- github-comment-id:4348176588 -->
adam commented 2026-10-05 02:01:43 +02:00
Author
Owner
Copy link
Copy source

Just pushed a fresh image 🙂 Feel free to open a new issue if the updated image doesn't work for you.

Just pushed a fresh image 🙂 Feel free to open a new issue if the updated image doesn't work for you. <!-- github-comment-id:4357666106 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/Remote-Terminal-for-MeshCore#169