0

У меня есть небольшой блок, в котором присутствует два выпадающих списка. У элементов внутри него применена функция scale(0), которая затем переходит в scale(1) для анимации. Так вот, почему-то, когда открываешь первый список, блок с атрибутами, который расположен дальше в DOM, залипает. Получается, что на секунду он становится выше, а затем резко исчезает. При этом появляется только его заливка, а не весь блок. Не знаю, почему это происходит. Как это можно исправить?

Сразу скажу, что ставить display: none; когда его нет, или устанавливать для всех атрибутов will-change: transform не вариант! Да, это помогает, но у меня может быть от 10 до 100 таких блоков, так что установить всем им will-change: transform - не выход!

Причем очень странно, так как когда у .wrapper__box .box стоит grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); и на экране помещаются именно два блока, только тогда появляется это залипание! Если блок занимает все пространство экрана, тогда нет залипания! Какой-то бред :)

Чтобы повторить, просто раскройте первый выпадающий список, и увидите после закрытия, чтобы повторить его, нужно подождать 2-4 секунды и сново открыть.

Так-как код очень большой, и сюда не влез даю отдельный файл.

https://drive.google.com/file/d/1iUujz6zJ_nigvBxCeoRnA0WoqgP342wh/view?usp=sharing

И вот скриншот

Залипания блока

1 ответ 1

1

Чтобы этот эффект исчез удалите background-color на 453 строке css. Цвет этого элемента всё равно не видно из-за того, что его дети имеют другие цвета:

.wrapper__box .box .box-wrapper .main-wrapper .equipment__type-wrapper .main .container .items-wrapper .item .item-main .attributes-wrapper .attribute {
  background-color: #f0f0f0; //Delete
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.