ul 导航中 Google Chrome 中不稳定的 CSS3 过渡答案

【问题标题】：Shaky CSS3 Transition in Google Chrome in ul navigationul 导航中 Google Chrome 中不稳定的 CSS3 过渡
【发布时间】：2015-09-06 12:15:47
【问题描述】：

我正在创建带有过渡的 2 级导航。我面临的问题是，当下拉导航展开时，它会震动整个菜单中的文本。我创建了一个 codepen 示例。当我为服务导航项上的向下箭头的转换进行广告转换时，似乎会发生此问题。如果我从 .nav 类中删除垂直对齐，它会减少抖动，但它仍然存在。

Code Pen link

.header {
  background: #0c121f;
  width: 100%;
  color: #fff;
}

.header:before, .header:after {
  content: "";
  display: table;
}

.header:after {
  clear: both;
}

.header-banner {
  float: left;
  position: relative;
  vertical-align: bottom;
}

.header-logo, .header-tel {
  display: block;
}

.header-tel {
  height: 1.5rem;
}

@media only screen and (min-height: 768px) {
  .header-banner {
    height: 9.375rem;
    width: 20%;
  }
}
[class^="ico-"]:before, [class*=" ico-"]:before, [class^="ico-"]:after, [class*=" ico-"]:after {
  font-family: ico;
  font-size: 0.9375rem;
  line-height: 0.9375rem;
  font-style: normal;
  margin-right: 0.9375rem;
}

.ico-downarrow:before {
  content: "\e007";
}

.ico-downarrow {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
.ico-downarrow:before {
  position: absolute;
  left: 19px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-wrap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #ccc;
}

.nav, .sub-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav {
  z-index: 1000;
}
.nav a {
  display: block;
  color: #fff;
  white-space: nowrap;
  font-size: 0.9375rem;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 0.9375rem;
  height: 3.3125rem;
  padding: 15px;
}

.nav-item {
  position: relative;
}

.sub-nav {
  overflow: hidden;
  background: #394356;
  max-height: 0;
  -webkit-transition: max-height 0.3s ease-in-out;
  -moz-transition: max-height 0.3s ease-in-out;
  transition: max-height 0.3s ease-in-out;
}

.active a {
  color: #fff;
}

@media only screen and (min-width: 40.063em) {
  .nav-wrap {
    height: 9.375rem;
    display: block;
    float: left;
  }

  .nav {
    position: relative;
    width: 53.125rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .nav-item {
    position: relative;
    display: table-cell;
    width: 1%;
  }
  .nav-item:hover {
    background: #394356;
  }

  .sub-nav {
    position: absolute;
    top: 3.3125rem;
    left: 0;
  }

  .sub-nav-item:hover {
    background: #49566f;
  }

  .dropdown:hover .sub-nav {
    max-height: 13.25rem;
  }
  .dropdown:hover .ico-downarrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
.dropdown-toggle {
  background: #2c3341;
  position: absolute;
  height: 3.3125rem;
  width: 3.3125rem;
  right: 0;
  top: 0;
}

我检查了 IE，Mozilla 工作正常。只是铬。请帮忙。

【问题讨论】：

标签： css google-chrome css-transitions

【解决方案1】：

我已经解决了我自己的问题，感谢您尝试是否有人这样做。我只是使用不同的方法来垂直对齐导航。所以我认为问题在于 chrome 如何渲染 transform(translateY(-50%))。

  .nav {
    height: $nav-item-height;
    width: rem-calc(850); // 850px
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -($nav-item-height/2); // -26.5px
  }

【讨论】：