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

#html #jquery #css #google_chrome #safari

Вывожу блок



//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. Почему так происходит понять не могу, что делаю не
так? Спасибо!
    

Ответы

Ответ 1

У вас есть код для 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 года старыми.