html - 下拉过渡在 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;
}