CSS transform and transition not working in Safari - css

Question

I am working on a <nav> 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.
In the snippet below, if you check out the mobile view (max-width: 768px) 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.
$("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">Some logo</strong>
</div>
<!-- navigation opener -->
<span>opener</span>
<div class="navigation-container">
<div class="drop">
<!-- main navigation of the page -->
<nav id="nav">
<ul>
<li class="active">HOME</li>
<li>BIBLE RESOURCES</li>
<li>OUR MISSION</li>
</ul>
</nav>
</div>
</div>
Equivalent jsFiddle
Can anyone point me in the right direction?

Answer 1

Transform and transition don't work on safari and chrome without browser perfix that is webkit for safari so use:
-webkit-transform and -webkit-transition instead...

Answer 2

the transform property need to be prefixed in safari
for ex.: -webkit-transform
for any other resource check this

Answer 3

Apple stopped releasing Safari latest versions for windows long back (2012). Might be your using old Safari browser which is not compatible with CSS3..
Chrome and latest safari works on webkit rendering engine.. If it works in chrome then it will work same on safari as well.
Safari Versions which support transform:
http://caniuse.com/#feat=transforms2d
Correct me if i'm wrong :)

Answer 4

As mentioned in http://html-tuts.com/fix-laggy-transitions-in-css/ you also need to add an extra property when you work with Safari and transition, or else it can get laggy.
You do this by adding the css property transform with the value translateZ(0) to the element with the transition property - in this case:
.nav-opener span {
...
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}