下拉转换在 Safari 中不起作用

Question

我有一个导航，其中一些项目有一个下拉菜单。 在 Firefox 和 Chrome 中，一切正常。 但在 Safari 中，这种转换根本没有发生。

如果 safari 有过渡问题，但页面上的其他过渡没有任何问题，我已经搜索了一下。

我已将fiddle 包含在代码中。

HTML

<nav>
  <ul>
    <li><a href="">lorem</a></li>
    <li class="dd">
      <a href="" class="dd-trigger">ipsum</a>
      <ul class="dd-list">
        <li><a href="">sit</a></li>
        <li><a href="">amet</a></li>
      </ul>
    </li>
    <li><a href="">dolor</a></li>
  </ul>
</nav>

CSS

nav > ul:after {
  display: table;
  clear: both;
  content: '';
}

nav {
  margin-top: 60px;
}
nav > ul {
  background: turquoise;
}
nav > ul > li {
  float: left;
  margin-left: 20px;
}

.dd {
  position: relative;
}
.dd:hover .dd-list {
  height: auto;
  opacity: 1;
  transform: translateY(100%);
}

.dd-list {
  background: lightgray;
  position: absolute;
  bottom: 0;
  transform: translateY(97%);
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 250ms ease,  transform 250ms ease,  height 250ms ease;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul a {
  display: block;
  color: white;
  padding: 10px 15px;
}
ul a:hover {
  background: darkturquoise;
}

Answer 1

我已设置浏览器前缀并将height: 1px; 添加到.dd-list。 JSFiddle

---

CSS

nav > ul:after {
  display: table;
  clear: both;
  content: '';
}

nav {
  margin-top: 60px;
}
nav > ul {
  background: turquoise;
}
nav > ul > li {
  float: left;
  margin-left: 20px;
}

.dd {
  position: relative;
}
.dd:hover .dd-list {
  height: auto;
  opacity: 1;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}

.dd-list {
  background: lightgray;
  position: absolute;
  bottom: 0;
  transform: translateY(97%);
  -webkit-transform: translateY(97%);
  -moz-transform: translateY(97%);
  -ms-transform: translateY(97%);
  -o-transform: translateY(97%);
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -webkit-transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -moz-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -ms-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -o-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul a {
  display: block;
  color: white;
  padding: 10px 15px;
}
ul a:hover {
  background: darkturquoise;
}

Answer 2

像这样在所有转换 css 之前添加前缀 -webkit-

-webkit-transform: translateY(100%);

Transform 仅在带有前缀 -webkit- 的 Safari 中有效。

好习惯是所有前缀都用tranformcss

transform:
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:

这种方式转换适用于所有浏览器

Answer 3

我用一个小技巧解决了它..

设置height: 1px，你可以吗？并且还设置了 -webkit-transform 和 -webkit-transition 支持。