У меня есть небольшой блок, в котором присутствует два выпадающих списка. У элементов внутри него применена функция 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
И вот скриншот