Sticky Webapp Telegram | различие между android и ios

Question

В кратце:

В вебапе телеграмма на Ios на всех страницах приложения на Next.js (SPA) появляется скролл приложения верх-вниз (даже navbar со стилем "fixed bottom-0") скроллится со всей страницей.

Этого бага нету на устройствах android и в браузере на windows при разработке.

Изначально цель была сделать приложение не закрываемым по свайпу, она была достигнута с помощью оф. гайда (https://docs.telegram-mini-apps.com/platform/sticky-app), но появился этот баг.

Отладка затрудняется тем, что у меня нету устройства на ios и приходится постоянно тревожить друзей и знакомых чтобы проверить очередную гипотезу по устранению бага.

Возможно, это поможет вам, помочь найти, в чем ошибка или указать мне в какую сторону копать

1. Продакшн бота: @PuPcoinBot (просмотреть баг самому)

2. Ссылка на видео бага: https://youtube.com/shorts/S0FrakeO18U?feature=share

3. Главный layout.tsx:

<>
      <Head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" // , viewport-fit=cover
        />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      </Head>
      <Script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></Script>
      <Script id="tg">
        {`(function() {
      var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;
      var lp = retrieveLaunchParams();

      // Some versions of Telegram don't need the classes above.
      if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {
        return;
      }

      // Expand the application.
      postEvent('web_app_expand');

      document.body.classList.add('mobile-body');
      document.getElementById('wrap').classList.add('mobile-wrap');
      document.getElementById('content').classList.add('mobile-content');
    })();`}
      </Script>
      <Script src="https://telegram.org/js/telegram-web-app.js"></Script>
      <html lang="en">
        <Suspense>
          <body className={inter.className}>
            <div id="wrap">
              <div id="content">{children}</div>
            </div>
          </body>
        </Suspense>
      </html>
    </>

4. Фрагмент css стилей:

body {
  background: black;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior: none; /* Предотвращает перетягивание на iOS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Скрыть скроллбар в Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Webkit (например, Safari, Chrome) */
}

.mobile-body {
  overflow: hidden;
  height: 100vh;
}

.mobile-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: red;
}

.mobile-content {
  height: calc(100% + 1px);
  background: green;
}

Буду очень признателен и рад хотя бы какой то информации о фиксе этого бага, спасибо!

Answer 1

body {
  background: black;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior-y: contain; /* Предотвращает перетягивание на iOS */
  height: -webkit-fill-available;
  min-height: 100%;
}

html {
  overflow: hidden;
}

body::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Webkit (например, Safari, Chrome) */
}

Этот фрагмент для стилей CSS исправил этот баг

БЛОГ НА HUSL

Sticky Webapp Telegram | различие между android и ios

Ответы (1 шт):