I deduce the block

//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; } 
 <div class="social"> <div class="social__hidd"> <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a> <i class="fa fa-search openSearch" aria-hidden="true"></i> </div> </div> <div class="search"> <div class="search__cont"> <input class="search__input main-textLato" type="text" placeholder="Search..."> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <i class="fa fa-times closeSearch" aria-hidden="true"></i> </div>

By clicking on the search button .openSearch : enter image description here

The social network .social and the .search block is .search . The .search block .search organized in flex, so through jq I assign it display:'flex' . In all browsers except Safari, it works fine: enter image description here

But in Safari is not so: enter image description here I found out the reason, the fact is that in all browsers the jq code works correctly and the inline display:flex style is assigned to the .search block, but Safari is instead assigned the inline display:block style. Why can't I understand this, what am I doing wrong? Thank!

  • Do you have windows or linux? - Yuri
  • I ask why. On these operating systems there is only the oldest version of safari. In new versions, everything will be displayed normally - Yuri
  • one
    And what is the safari version? - Vadim Ovchinnikov
  • Most likely, the problem in the safari version is that it does not support flex. or prefixes are not registered for flex - HamSter
  • @Yuri I have a Windows, and yes you are probably right. I looked at version 5.1.4, somewhere in 2012))) On the poppy, the last 10.0.1. How to test on Windows sites for the latest versions of safari? - Alexander Alekseev

1 answer 1

You have code for flexbox with vendor prefixes for sure to support older browsers.

 display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;

So, to make it work, do it. Move this code to class.

 .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

Then from jQuery, use the toggleClass function with the flex class. Or else the addClass and removeClass .

Also in jQuery UI, the toggleClass function toggleClass expanded and allows you to animate class enable / disable.

Alternatively, you can also simply stop supporting rather old browsers (if this is permissible for you). I believe that I have the right to call 2012 browsers old with the current pace of development.

  • Thank you, such a simple solution, did not guess)) - Alexander Alekseev