CSS transform and transition not working in Safari

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"><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>

Equivalent jsFiddle

Can anyone point me in the right direction?

I don't see any -prefix for -webkit or -moz for your animation. Try adding all transitions also with the right prefix. For instance: transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; — Alessandro Incarnati, Apr 25 '15 at 10:56
its old version. Infact released in 2012 .. Test ur code in OSX . It will work. http://caniuse.com/#feat=transforms2d — Prime, Apr 25 '15 at 11:28

score 5 · Accepted Answer · answered Apr 25 '15 at 10:57

5

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...

answered Apr 25 '15 at 10:57

Dipesh Rana

367
1
9

1

chrome is now prefix-free for this properties – vals Apr 25 '15 at 10:59
Yes, you are right, but webkit is common for both browsers so both will be rendered – Dipesh Rana Apr 25 '15 at 11:01

score 0 · Answer 2 · answered Apr 25 '15 at 10:59

0

the transform property need to be prefixed in safari for ex.: -webkit-transform

for any other resource check this

answered Apr 25 '15 at 10:59

maioman

18,154
4
36
42

Prime · Answer 3 · 2015-04-25T11:32:33.730

0

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 :)

edited Apr 25 '15 at 11:32

answered Apr 25 '15 at 11:00

Prime

3,530
5
28
47

score 0 · Answer 4 · answered Oct 18 '21 at 17:33

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); 
}

CSS transform and transition not working in Safari

4 Answers4

Linked