title: CSS transform and transition not working in Safari
body: <p>I am working on a <code>&lt;nav&gt;</code> for a mobile site. It is working file in Firefox and Chrome but not in Safari. I am running it on Windows 8.1 and I observed the same issue on Safari in iPad mini.</p>
  
  <p>In the snippet below, if you check out the mobile view (<code>max-width: 768px</code>) and click on the menu icon in the top right corner, that icon is suppose to animate to a cross (X) icon, also the nav menu is suppose to slide down.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("a.nav-opener").click(function(e) {
    e.preventDefault();
    $('body').toggleClass("nav-active");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="holder"&gt;
    &lt;strong class="logo"&gt;&lt;a href="#"&gt;Some logo&lt;/a&gt;&lt;/strong&gt;
  &lt;/div&gt;
  
  &lt;!-- navigation opener --&gt;
  &lt;a href="#" class="nav-opener"&gt;&lt;span&gt;opener&lt;/span&gt;&lt;/a&gt;
  
  &lt;div class="navigation-container"&gt;
    &lt;div class="drop"&gt;
      &lt;!-- main navigation of the page --&gt;
      &lt;nav id="nav"&gt;
        &lt;ul&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;BIBLE RESOURCES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;OUR MISSION&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/Lvekasjc/8/" rel="nofollow">Equivalent jsFiddle</a></p>
  
  <p>Can anyone point me in the right direction?</p>