CSS transform and transition not working in Safari

I am working on <nav>

for a mobile site. This is a working file in Firefox and Chrome, but not Safari. I am running it on Windows 8.1 and I have observed the same issue with Safari on iPad mini.

In the snippet below, if you browse the mobile view ( max-width: 768px

) and click on the menu icon in the upper right corner, this icon is supposed to animate the cross icon (X), also the navigation menu Suppose it slides down.

$("a.nav-opener").click(function(e) {
  e.preventDefault();
  $('body').toggleClass("nav-active");
});
      

@media screen and (max-width: 768px){

  .holder {
    padding: 14px;
  }

  .logo {
    float: none;
    display: block;
    margin: 0px auto;
    width: 168px;
    position: relative;
    z-index: 2;
  }

  a {
    text-decoration: none;
    color: #DC7952;
    outline: medium none;
  }

  .logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .nav-opener {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    border-left: 1px solid #D4D4D4;
    width: 65px;
    height: 53px;
    text-indent: -9999px;
    overflow: hidden;
    background: none repeat scroll 0% 0% transparent;
    z-index: 15;
  }

  .nav-opener::before, .nav-opener::after {
    content: "";
    top: 19px;
  }

  .nav-opener::before, .nav-opener::after, .nav-opener span {
    background: none repeat scroll 0% 0% #DC7952;
    position: absolute;
    left: 15%;
    right: 15%;
    height: 6px;
    margin-top: -2px;
    transition: all 0.2s linear 0s;
  }

  .nav-opener::after {
    top: 37px;
  }

  .nav-opener span {
    background: none repeat scroll 0% 0% #DC7952;
    position: absolute;
    top: 28px;
    left: 15%;
    right: 15%;
    height: 6px;
    margin-top: -2px;
    transition: all 0.2s linear 0s;
  }

  .nav-active .nav-opener::after, .nav-active .nav-opener::before {
    transform: rotate(45deg);
    border-radius: 3px;
    top: 24px;
    left: 15%;
    right: 15%;
  }

  .nav-active .nav-opener::after {
    transform: rotate(-45deg);
  }

  .nav-opener::before, .nav-opener::after {
    content: "";
  }

  .nav-active .nav-opener span {
    display: none;
  }

  .navigation-container {
    border: 0px none;
    overflow: hidden;
    position: absolute;
    top: 53px;
    left: 0px;
    right: 0px;
    z-index: 999;
    max-height: 0px;
    transition: all 0.25s linear 0s;
    margin: 0px;
    padding: 0px;
  }

  .nav-active .navigation-container {
    max-height: 4000px;
  }

  .navigation-container .drop {
    transition: all 0.25s linear 0s;
    transform: translateY(-100%);
    background: none repeat scroll 0% 0% #FFF;
    width: 100%;
    display: table;
  }

  .nav-active .drop {
    transform: translateY(0px);
  }

  #nav {
    margin: 0px;
    overflow: visible;
    font-size: 24px;
    display: table-header-group;
    font-family: "apercu",sans-serif;
    font-weight: 700;
    line-height: 1.4285;
    text-transform: uppercase;
  }

  #nav ul {
    display: block;
    border-top: 1px solid #E8E8E8;
    padding: 0px;
    width: 100%;
    margin: 0px;
  }

  #nav li {
    display: block;
    width: auto;
    border-style: solid;
    border-color: #E8E8E8;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-width: 0px 0px 1px;
    list-style: outside none none;
  }

  #nav li.active a, #nav li a:hover {
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #DC7952;
  }

  #nav a {
    display: block;
    text-align: left;
    padding: 15px 20px;
  }
}
      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <strong class="logo"><a href="#">Some logo</a></strong>
</div>

<!-- navigation opener -->
<a href="#" class="nav-opener"><span>opener</span></a>

<div class="navigation-container">
  <div class="drop">
    <!-- main navigation of the page -->
    <nav id="nav">
      <ul>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">BIBLE RESOURCES</a></li>
        <li><a href="#">OUR MISSION</a></li>
      </ul>
    </nav>
  </div>
</div>
      

Run code


JsFiddle equivalent

Can anyone point me in the right direction?

+3


source to share


3 answers


Transform and transition doesn't work on safari and chrome without browser, which is a webkit for safari, so use:



-webkit-transform and -webkit-transition instead ...

+5


source


the transform property must be prefixed in safari for example: -webkit-transform



for any other resource check this

0


source


Apple discontinued the latest versions of Safari for Windows back back (2012). You may be using an old Safari browser that is incompatible with CSS3.

Chrome and the latest safari work with the webkit rendering engine. If it works in chrome, then it will work the same in safari.

Safari versions that support conversion:

http://caniuse.com/#feat=transforms2d

Correct me if I'm wrong :)

0


source







All Articles