Модификация отвалилась в автолэйауте: что проверить дизайнеру

Короткий ответ

В автолэйауте не пытайтесь лечить мод случайными top, left и дополнительным transform. Сначала выясните, на чём он построен. Если код ищет содержимое элемента, он может пережить flex. Если читает координаты из редактора или ждёт, что секция сама подрастёт, его надо адаптировать.

Для дизайнера это важная граница: внешний вид в редакторе может быть тем же, а способ, которым браузер раскладывает элементы, уже другой.

Что меняет автолэйаут

Обычный элемент Zero Block привязан к артборду координатами. У него есть верхняя и левая позиция, и многие старые скрипты используют эти числа как карту секции. Во flex-режиме место задают порядок элементов, направление, промежутки и размеры контейнера. Координата из редактора остаётся в данных проекта, но перестаёт быть надёжным ответом на вопрос «где элемент сейчас».

На проверочном стенде инлайновые координаты 400px дали фактический сдвиг 0.0 × 0.0 px. Это не ошибка CSS: flex-правила Тильды намеренно сильнее старой абсолютной раскладки.

Ещё нагляднее данные редактора расходятся с браузером. Из 110 сравнений data-field-top-value не совпал с реальным положением 82 раза; худшая пара — 324 в атрибуте и 34 пикселя по факту. Поэтому расчёт «возьмём сохранённый top и подвинем всё, что ниже» в автолэйауте нельзя считать безопасным.

Листья и группы — не одно и то же

После публикации Тильда создаёт два близких типа узлов:

• конечные элементы с содержимым — текст, кнопка, картинка и их .tn-atom;
• flex-группы, которые организуют раскладку других элементов.

На стенде было 162 узла с признаком flex: 106 конечных элементов и 56 групп. Скрипт, который хватается за каждый .t396__elem-flex как за кнопку или карточку, неизбежно зацепит контейнеры. Надёжнее назначать собственный CSS-класс именно тем элементам, с которыми должен работать мод.

Проверять структуру надо в консоли опубликованной страницы, потому что классы расставляет рантайм Тильды:

const flexNodes = [...document.querySelectorAll('.t396__elem-flex')];
const leaves = flexNodes.filter((node) => node.classList.contains('t396__elem'));

console.log({ all: flexNodes.length, leaves: leaves.length });

Этот код ничего не меняет. Он только показывает, сколько на странице flex-узлов и сколько среди них конечных элементов.

Почему аккордеон раскрывается, но секция не растёт

Раскрытие панели и высота Zero Block — две отдельные задачи. Можно успешно показать скрытый текст, но оставить артборду прежнее число пикселей. Тогда контент обрежется или наедет на следующий блок.

На стенде высота hug-артборда прошла три состояния:

1. До изменения — 353 пикселя.
2. После добавления 300 пикселей контента — всё ещё 353.
3. После t396__updateAutoHeight — 647 пикселей.

Разница показывает правильную ответственность мода. Он должен не угадывать новую высоту и не писать её руками, а после раскрытия попросить Тильду пересчитать текущий hug-артборд. Затем рантайм сам обновит атрибуты, перерисует секцию и отправит событие zero:height-changed.

Именно на этой границе построен MOD-184: независимые группы аккордеона живут во flex-потоке, а секция пересчитывается штатным способом.

Проверка чужой модификации без переписывания кода

Откройте опубликованную страницу и пройдите короткий список:

1. У проблемного элемента есть ваш служебный класс, указанный в инструкции?
2. Этот класс стоит на конечном элементе, а не на общей flex-группе?
3. Мод действительно запустился, или в консоли есть первая ошибка раньше него?
4. После раскрытия изменилась высота содержимого?
5. У артборда включён hug, и изменилось ли его значение высоты?
6. Поломка повторяется после загрузки шрифтов и картинок, а не только в первый кадр?

Если элемент открывается, но следующий блок наезжает, искать ошибку в клике уже не нужно — сломан пересчёт высоты. Если не открывается только один экземпляр, проверьте группы и повторяющиеся идентификаторы. Если все экземпляры получают одинаковое состояние, код, скорее всего, не различает независимые группы.

Как ставить задачу разработчику

Вместо «мод не работает в автолэйауте» передайте четыре факта:

• адрес опубликованной страницы;
• номер записи Zero Block;
• класс элемента из инструкции;
• что именно не произошло: клик, раскрытие, независимая группа или рост секции.

Так разработчик увидит не скриншот результата, а точку отказа. И отдельно зафиксируйте требование: мод не должен возвращать элементы к абсолютным координатам — иначе он исправит аккордеон ценой разрушенного автолэйаута.