Safari中的下拉转换不起作用

Question

我有一个导航，其中一些项目有下拉列表。在Firefox和Chrome中，一切都正常工作。但在Safari中，这种转变根本没有发生。

我搜索了一下safari是否有转换问题，但页面上的其他转换没有任何问题。

我已经包含了一个代码小提琴。

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

我已经设置了浏览器前缀，并在.dd-list中添加了一个height: 1px;。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。

好习惯是使用tranform css 的所有前缀

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

这种方式转换将在所有浏览器中工作

Answer 3

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

设置height: 1px，你可以吗？并设置-webkit转换和-webkit过渡支持。