search

Telegram-Mini-Apps / issues

Centralised storage of platform issues and enhancement proposals.
5 stars 0 forks source link

Incorrect viewport shift when OSK is open #15

Open nikitabelotelov-ciliz opened 7 months ago

nikitabelotelov-ciliz commented 7 months ago

Platform

Describe the bug

There is an unexpected gap between the on-screen keyboard and the input field within a Telegram Mini App when the keyboard is active. The input field is intended to be positioned at the bottom of the screen, but upon activating the OSK, there is a visible space separating the two, which is not consistent with the expected UI layout.

To Reproduce

Steps to reproduce the behavior:

  1. Open @nb_bottle_bot in telegram on ios
  2. Open mini app by clicking the menu button
  3. Focus on the input field to bring up the iOS on-screen keyboard.
  4. Observe that there is a gap between the bottom of the input field and the top of the on-screen keyboard.

Expected behavior

The expected behavior is that when the on-screen keyboard is activated, the input field should align directly above the keyboard without any noticeable gaps.

telegram-cloud-photo-size-2-5447221878541375864-y
hos commented 5 months ago

We have the same issue, here is a reproducible code

Create file app/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <title>My Tailwind CSS Document</title>
  <style>
    html {
      height: var(--tg-viewport-height);
    }
    body {
      height: 100%;
    }
  </style>
</head>

<body>

  <!-- <div class="flex flex-col justify-start h-full"> -->
  <div class="flex flex-col justify-start h-full">
    <div class="flex-grow text-center bg-indigo-500">Content</div>
    <input class="" placeholder="How"/>
  </div>

  <script src="https://cdn.tailwindcss.com/2.2.19/tailwind.min.js"></script>
  <script src="https://telegram.org/js/telegram-web-app.js"></script>

  <script>
    window.Telegram.WebApp.ready()
  </script>
</body>

</html>

Run an http server

npx http-server ./app

Run proxy with HTTPS

Use one of vscode port forwarding, cloudflared, ngrok, caddy ... to run HTTPS server and run it inside telegram mini app.

This is holding us from a release, so any workaround, hint or solution will be very helpful.

207AndrewLosyukov commented 5 months ago

this issue prevents me from making a release within a month