Назначить через jquery элементу display:flex

Вывожу блок
//block search $('.openSearch').click(function () { $('.social__hidd').stop().css({ opacity: 0.0, display:'none' }); $('.search').stop().fadeIn(0).css({ display:'flex' }).css({ // display: '-webkit-flex' }); }); $('.closeSearch').click(function () { $('.social__hidd').stop().css({ opacity: 1, display:'block' }); $('.search').fadeOut(0); }); .search{ color: @search; position: absolute; right: 0; top: 20%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; z-index: 25; i{ color: #fff; } &__cont{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid @search; margin-right: 13px; } &__input{ width: 207px; background-color: transparent; border:none; height: 30px; outline: none; }

По нажатию на кнопку поиск .openSearch:
Скрываются соц сети .social и показывается блок .search. Блок .search организован на flex, поэтому через jq назначаю ему display:'flex'. Во всех браузерах, кроме Safari, работает нормально:
Но в Safari не так: Причину узнал, дело в том что во всех браузерах код jq работает корректно и блоку .search назначается инлайновый стиль display:flex, однако в Safari вместо этого назначается инлайновый стиль display:block. Почему так происходит понять не могу, что делаю не так? Спасибо!

Ответ

У вас есть код для flexbox с вендорными префиксами наверняка для поддержки старых браузеров.
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;
Так вот, чтобы это работало сделайте так. Вынесите этот код в класс
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
Затем из jQuery используйте функцию toggleClass с классом flex. Либо ещё функции addClass и removeClass
Также в jQuery UI функция toggleClass расширена и позволяет анимировать включение/отключение класса.
Либо также можно просто перестать поддерживать довольно старые браузеры (если это допустимо для вас). Я считаю, что имею право с нынешним темпом развития называть браузеры 2012 года старыми.