Когда кнопка в самом низу(сверстана через позишн, или просто адаптивом) и находится в фокусе, то страница улетает вверх и только сделав скролл или написав букву она падает на место. Обычное состояние Когда в фокусе(но не ввел символ или не сделал скролл) Когда пальчиком пофиксил Перепробовал все возможные варианты, 4 Раза переверстал с 0, ни ху я. Пробовал с вьюпортом играться, с мета тегами. Дебажил блять, всё пробовал. Даже кнопку добавил тгшную. Я ебал нахуй с августа этот инпут. В браузере сафари оно в некоторых случаях работало нормально, но именно блять в тг нет. На андроиде все заебись. Считаю виноватым сам вебапп. Саму телегу =( Если кто-то знает решение проблемы, заплачу, очень много!! Фронт написан на React js
зайцевПлюсОдин, привет! Давай попробуем разобраться вместе. santiki, проблема, с которой ты столкнулся, действительно может быть связана с особенностями работы WebView в Telegram на iOS. Вот несколько идей, которые могут помочь: 1. **Использование `scrollIntoView`**: Попробуй использовать метод `scrollIntoView` для инпута, когда он получает фокус. Это может помочь автоматически прокручивать страницу к нужному элементу. const inputRef = useRef(null); const handleFocus = () => { inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }; return ( <input ref={inputRef} onFocus={handleFocus} // другие пропсы /> ); JavaScript const inputRef = useRef(null); const handleFocus = () => { inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }; return ( <input ref={inputRef} onFocus={handleFocus} // другие пропсы /> ); 2. **Использование `setTimeout`**: Иногда задержка может помочь браузеру правильно обработать фокус и прокрутку. const handleFocus = () => { setTimeout(() => { inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 300); }; JavaScript const handleFocus = () => { setTimeout(() => { inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 300); }; 3. **Использование `window.scrollTo`**: Если `scrollIntoView` не помогает, попробуй использовать `window.scrollTo` для ручной прокрутки страницы. const handleFocus = () => { setTimeout(() => { window.scrollTo({ top: inputRef.current.offsetTop - 100, // корректируй значение по необходимости behavior: 'smooth' }); }, 300); }; JavaScript const handleFocus = () => { setTimeout(() => { window.scrollTo({ top: inputRef.current.offsetTop - 100, // корректируй значение по необходимости behavior: 'smooth' }); }, 300); }; 4. **CSS решения**: Убедись, что у тебя нет конфликтующих стилей, которые могут влиять на поведение страницы при фокусе. Например, попробуй временно убрать `position: fixed` или `absolute` у элементов, чтобы проверить, не они ли вызывают проблему. 5. **Проверка мета-тегов**: Убедись, что у тебя правильно настроены мета-теги для мобильных устройств. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> HTML <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6. **Обновление Telegram Web App**: Убедись, что у тебя установлена последняя версия Telegram Web App. Иногда обновления могут включать исправления для подобных багов. Если ничего из этого не поможет, возможно, стоит обратиться к разработчикам Telegram с описанием проблемы. Они могут быть в курсе и предложить решение или исправление в будущем обновлении. Надеюсь, что-то из этого поможет! Удачи!
Привет, бро по несчастью. Решила поделиться своим горьким опытом (ios 18) Поставила 2 обработчика window.visualViewport?.addEventListener("resize", updateAppHeight); window.visualViewport?.addEventListener("scroll", updateAppHeight); В этой функции проверяю, если это не ТГ айфон, а просто сафари (хз почему так но работает), document.documentElement.style.setProperty( "--offset-top", `${visualViewport?.offsetTop || 0}px` ); и позже #app задаю translateY на эту величину. Для обоих случаев также получаю высоту visualViewport.height и тоже заношу в переменную css, app ставлю эту высоту. Но с этим подходом конкретно в ТГ получаем проблему, что курсор отображается выше инпута и иногда вообще незаметен (баг ТГ видимо). Я оооочень долго ебалась и методом тыка решила проблему так: Все проблемные инпуты я делаю двойными, второй абсолютом накладывается на первый и показывается при фокусировке на первый. С 1 фокус снимается. В большинстве случаев норм, но очень дёргано. Вот компонент на vue <template> <div class="relative" ref="doubleInputWrapper"> <div @focusin="changeVisibleForm"> <slot /> </div> <div v-if="problemInput && inputFocused" class="absolute inset-0" ref="outsideTarget" > <slot /> </div> </div> </template> <script setup lang="ts"> import { ref, computed, nextTick } from "vue"; import { useAuthStore } from "@/store/auth"; import { useAppStore } from "@/store/app"; import { onClickOutside } from "@vueuse/core"; let inputs: NodeListOf<Element> | undefined; const inputFocused = ref(false); const doubleInputWrapper = ref<HTMLDivElement | null>(); const authStore = useAuthStore(); const appStore = useAppStore(); const outsideTarget = ref<HTMLElement>(); const problemInput = computed(() => appStore.isIphone && authStore.isTelegram); const changeVisibleForm = () => { if (!problemInput.value) return; setTimeout(async () => { inputFocused.value = true; await nextTick(); inputs = doubleInputWrapper.value?.querySelectorAll( "[data-problem-input]" ); if (inputs?.length) { (inputs[0] as HTMLInputElement)?.blur(); await nextTick(); (inputs[1] as HTMLInputElement)?.focus(); } }, 1000); }; onClickOutside(outsideTarget, () => { inputFocused.value = false; }); </script>