WebView Issue: Keyboard Covers Input Fields on iOS Telegram Mini App

[leo-web3]

Telegram Application

Telegram for iOS

Describe the Bug

Description

When using the Telegram Mini App on iOS, there is an issue with the WebView where the keyboard appears and covers the input fields. This makes it impossible to see or interact with the covered areas, leading to a poor user experience.

To Reproduce

Steps to Reproduce

1. Open the Telegram Mini App on an iPhone.
2. Navigate to a page with input fields (e.g., a login form, search bar, etc.).
3. Tap on an input field to focus on it.
4. Observe the behavior when the keyboard appears.

Expected Behavior

The WebView should adjust its layout when the keyboard appears, ensuring that the input fields and other relevant content remain visible and accessible.

Actual Behavior

The WebView does not adjust properly, causing the keyboard to cover the input fields and other content, making them inaccessible.

Environment

• Device: iPhone
• iOS Version: 17.4.1
• WebView User Agent:

  Mozilla/5.0 (iPhone; CPU iPhone OS 17_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Additional Information

This issue appears to be related to the WebView not resizing or repositioning itself correctly when the keyboard is displayed. Similar issues have been observed in other applications and often require adjustments in the WebView configuration or additional JavaScript to handle the resizing.

Expected Behavior

Possible Solutions

• Adjust WebView settings to ensure proper resizing and repositioning when the keyboard is displayed.
• Implement JavaScript to handle input focus events and scroll the input fields into view when the keyboard appears.
• Ensure that the WebView content is responsive and can adapt to different viewport sizes when the keyboard is visible.

[agiWebgurus]

Have the same issue on IOS devices, any solution for this one?

[Prooksius]

Also tried to overcome this issue, the only thing that helped - MainButton. It should be shown and it somehow helps to prevent that covering. Try to use it with your form.

[weiweiwang]

@heyqbnk We have the same issue on our app, we add a MainButton for send action to workaround this problem but it looks ugly. Hope official update comes asap to fix this issue.

Thanks and waiting for your update.