Flexbox работает некорректно - кажется, что dom пересчитывается ⇐ CSS

[Гость]

У меня есть такое меню (это происходит и с текстом сайта)

[*]тесты [*]фдадасдасдас [*]dsdasdsadasdsa ВЕБ-САЙТ css:

/* контейнер */ /* * { дополнение:0; маржа: 0; размер коробки: border-box;} */ .контейнер { максимальная ширина: 2380 пикселей; поле слева: авто; поле справа: авто; } .мета-контейнер { дисплей: гибкий; /* -webkit-box-pack: центр; */ /* -ms-flex-pack: центр; */ оправдание-содержание: центр; } .мета-фон { положение: фиксированное; поле слева: авто; поле справа: авто; z-индекс: -1; размер фона: обложка; фоновый повтор: без повтора; -webkit-фильтр: размытие (10 пикселей); фильтр: размытие (10 пикселей); верх: 0; правильно: 0; внизу: 0; слева: 0; /* фоновое изображение: url('./assets/img/3.jpg'); */ } .meta-заголовок { белый цвет; позиция: абсолютная; внизу: 10 пикселей; дисплей: блок; } /* меню */ .meta-menu-top { фон: #252422; цвет: #959595; радиус границы: 0 пикселей 0 пикселей 10 пикселей 10 пикселей; /* верх: 0 пикселей; */ позиция: абсолютная; высота: 48%; ширина: 360 пикселей; непрозрачность: 0,7; дисплей: гибкий; оправдание-содержание: центр; } .meta-menu-top ul { заполнение: 0; маржа-верх: 30%; } .meta-menu-top li { тип стиля списка: нет; дисплей: блок; } .meta-menu-bottom { фон: #eef1f5; белый цвет; радиус границы: 10 пикселей 10 пикселей 0 пикселей 0 пикселей; /* внизу: 0 пикселей; */ позиция: абсолютная; высота: 48%; ширина: 360 пикселей; } и JS, чтобы скрыть/показать меню

let Menutop = $('.meta-menu-top'), Menubottom = $('.meta-menu-bottom'); //устанавливаем cookie для будущих предпочтений // // //получить куки, если запустили первый раз или нет // // пусть вверхВниз = 0, продолжительность = 1; let tlshow = new TimelineMax({pause: true }); tlshow.fromTo(menutop, period, {top: '-40%' }, { top: 0, легкость: Power3.easeInOut }) .fromTo(menubottom, длительность, { дно: '-40%' }, { дно: 0, легкость: Power3.easeInOut }, '-=' + продолжительность); let tlhide = new TimelineMax({pause: true }); tlhide.fromTo(menutop, period, { top: 0 }, { top: "-40%", легкость: Power3.easeInOut }) .fromTo(menubottom, длительность, { дно: 0 }, { дно: "-40%", легкость: Power3.easeInOut }, '-=' + продолжительность); Menutop.on("клик",функция(){ console.log("МЕНЮНАЖМЕННОЕ МЕНЮ"); если (вверхВниз == 0) { tlhide.restart(); вверхвниз = 1; } еще { тлшоу.рестарт(); вверхвниз = 0; } }); codepen здесь: https://codepen.io/giventofly/pen/RxMRMR

в Chrome все работает нормально, в Firefox верх/низ мета-меню сдвигаются влево и снова перемещаются в центр.

пробовал использовать префикс webkit/moz и даже использовать Normalize.css, но безрезультатно.

Что может быть?