Почему обрезается popup в Tilda и как это исправить

При разработке сайтов на платформе Tilda многие сталкиваются с ситуацией, когда всплывающее окно (popup) отображается корректно в 80% случаев, но на некоторых устройствах часть блока обрезается. Чаще всего проблема проявляется на мобильных телефонах, особенно на Android, и редко затрагивает iPhone. Разберём основные причины и способы решения.

Основные причины обрезания popup

Проблема обычно связана с несоответствием размеров окна и контента, а также с особенностями CSS-свойств в Tilda. Вот ключевые факторы:

• Высота контента превышает высоту экрана - если внутри popup много текста или изображений, окно может не вписаться в viewport.
• Некорректные CSS-свойства - например, отсутствие overflow-y: auto или неправильное позиционирование.
• Особенности мобильных браузеров - адресная строка и панель навигации могут динамически менять видимую высоту окна.
• Конфликт с Zero Block - если popup создан с нуля, возможны ошибки в кастомных стилях.

Как исправить обрезание popup в Tilda

1. Добавьте CSS-правило для прокрутки

Самый простой способ - разрешить прокрутку внутри popup. Для этого в блоке «Настройки» → «CSS» добавьте код:

.t-popup__container { overflow-y: auto !important; max-height: 90vh !important; }

Это ограничит высоту окна и добавит полосу прокрутки, если контент не помещается.

2. Исправьте позиционирование на мобильных

Иногда проблема вызвана фиксированным позиционированием. Попробуйте заменить position: fixed на position: absolute в CSS мобильной версии:

@media (max-width: 768px) { .t-popup { position: absolute !important; top: 0 !important; } }

3. Проверьте высоту Zero Block

Если popup создан через Zero Block, убедитесь, что высота блока не задана жестко. В настройках блока установите «Высота: Авто» или используйте минимальную высоту min-height: 100vh.

4. Отключите обрезку контента

В некоторых темах Tilda может быть активен overflow: hidden. Добавьте в CSS:

.t-popup { overflow: visible !important; }

Дополнительные советы для мобильных устройств

Для Android-устройств рекомендуется также:

• Использовать 100dvh вместо 100vh в CSS, чтобы учитывать динамическую высоту браузера.
• Проверить, нет ли конфликта с плагинами или кастомными скриптами.
• Протестировать popup в разных браузерах (Chrome, Firefox, Samsung Internet).

Что делать, если ничего не помогло

Если перечисленные методы не решили проблему, попробуйте пересоздать popup заново, используя стандартный блок Tilda «Всплывающее окно» вместо Zero Block. Также можно обратиться в поддержку Tilda или на профильные форумы, приложив скриншот и ссылку на страницу.