我的代码在Safari上不起作用

Question

viewing this fiddle in Google Chrome works fine and the slide down and up effect works, but in Safari it doesn't. What am I doing wrong? Is it the jQuery or the css?

Here's the code:

jQuery:

$(function() {
  $('.dropdown').hide();
  $('.dropdown-toggle').click(function(e) {
    $('.dropdown').slideToggle(400);
    $('.dropdown-toggle').slideDown('active');
    $('.dropdown').toggleClass('is-active');
    return false;
  });
  $(document).click(function() {
    if ($('.dropdown').is(':visible')) {
      $('.dropdown', this).slideUp();
      $('.dropdown').removeClass('is-active');
    }
  });
});

CSS:

body {
  padding: 2em;
}
a {
  text-decoration: none;
  color: #000;
}
nav {
  position: relative;
}
.dropdown-toggle {
  padding: .5em 1em;
  background: #777;
  border-radius: .2em .2em 0 0;
}
.dropdown {
  position: absolute;
  margin-top: .5em;
  background: #777;
  min-width: 12em;
  padding: 0;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
  transition: transform .3s
}
.dropdown.is-active {
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  display: block
}
ul.dropdown li {
  list-style-type: none;
}
ul.dropdown a {
  text-decoration: none;
  padding: .5em 1em;
  display: block;
}

HTML:

<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
  <ul class="dropdown">
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Search</a>
    </li>
  </ul>
</nav>

Thanks!

Answer 1

I could not add a comment so I'll answer instead.

could you try with a higher version of safari to test compatibility.

could be due to the outdated javascript engine ?

Answer 2

IMO your question is confusing. This sentence:

the slide down and up effect works, but in Safari it doesn't.

is misleading. Actually, the transform property does work and it has the expected behaviour (it "slides down and up") both on your version of Safari (5.1.7) on Windows (I have just tested out) and on modern versions of Safari on OS X.

The CSS property transform is available on Safari since its 3.1 version, as you can check out here .

What it is not working is the transtion effect. For that one you need a more updated Safari, read here .

Hope it helps.