Chrome CSS 3转换不顺利

Question

您正在为新网站的网站设计工作,主页有一些使用CSS3过渡的flyup菜单.

如果你去---------然后看一下Chrome浏览器主页上的"Some Menu that nice","Another Cool Menu"等链接,当你鼠标悬停在它们上面时但转换不顺畅,菜单标签看起来像是在上下振动.我在下面包含了CSS,但它可以在网站上的style.css文件中找到(相关部分从1905行开始)

这只是在chrome,Safari和Firefox工作正常和IE ...好吧,现在不要谈论它....

.home #site-navigation .menu-main-menu-container .trait-box { 
    width: 100%; 
}

.home .main-navigation ul,
.home .main-navigation {
    margin: none;
    border: none;
}

.home .main-navigation ul li {
    border: none;
}

.home .main-navigation ul li a {
    margin-left: 0;
    margin-right: 0;
}

.home .trait-box { 
    margin-top: 480px; 
    display: block; 
    text-align: center; 
    height: 126px; 
    position: relative; 
    color: #4e4e4d; 
    text-decoration: none !important;
}
.home .trait-box h4 { 
    position: absolute;
    bottom: 35px; 
    width: 90%; 
    font-size: 16px;
    font-size: 1.14285714rem;
    line-height: 20px;
    line-height: 1.25;
    font-family: 'ProximaNovaSemibold', Arial, Helvetica;
    font-weight: normal;
    color: #D06F4A;
    margin-left: 5%;
}

.home .trait-box figure { 
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    opacity: 0;
}
.home .trait-box figure img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
}
.home .trait-box dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
    position: absolute;
    top: 0px;
}

.home .trait-box.main-menu-orange dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-teal dl {
    border-top-color: #405C69;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-blue dl {
    border-top-color: #5E7599;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-green dl {
    border-top-color: #A9B800;
    border-top-style: solid;
    border-top-width: 12px;
}

.home .trait-box dd { 
    font-size: 15px;
    font-size: 1.07142857rem;
    line-height: 19px;
    line-height: 1.266666667;
    margin-bottom: 12px;
    font-family: Georgia, Times, 'Times New Roman', serif;
    color: #595959;
    padding: 0 10px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    margin-top: 20px;
}

.home .trait-box dd span {
    white-space: nowrap;
    display: block;
    width: 70%;
    padding: 3px 0;
    margin: 38px auto 40px;
    background: #D06F4A;
    font-size: 15px;
    font-size: 1.07142857rem;
    font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 5px 10px;
    padding-top: 12px;
    color: #ffffff;
    opacity: 0;
}

.home .trait-box.main-menu-orange dd span {
    background-color: #D06F4A;
}

.home .trait-box.main-menu-blue dd span {
    background-color: #5E7599;
}

.home .trait-box.main-menu-teal dd span {
    background-color: #405C69;
}

.home .trait-box.main-menu-green dd span {
    background-color: #A9B800;
}

.home .trait-box,
.trait-box figure,
.trait-box dd,
.trait-box dl,
.trait-box dd span {
    -webkit-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98);
    -webkit-transition-delay: 0;
    -moz-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    -o-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
}

.home .trait-box:hover,
.trait-box.expanded {
    margin-top: 0;
    padding-top: 400px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    background: white;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure {
    height: 184px;
    opacity: 1;
}

.home .trait-box:hover dl {
    margin-top: 184px;
}

.home .trait-box:hover dd,
.trait-box.expanded dd { 
    height: 170px;
    opacity: 1;
}

.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    opacity: 1;
}

.home .trait-box:hover dd span:hover,
.trait-box.expanded dd span:hover {

}

.home .trait-box:hover,
.trait-box.expanded {
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dl, 
.trait-box.expanded dl { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dd,
.trait-box.expanded dd {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 1100ms;
    -moz-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    transition-delay: 1100ms;
}

Answer 1

您正在导致浏览器重排,这种情况很昂贵,并且会在每个动画步骤中更改布局,从而导致抖动和抖动.

要解决此问题,您需要对您的动画元素应用绝对定位,将其添加到CSS将使您开始:

.home .main-navigation ul {
  position: relative;
  height: 180px;
}

.home .main-navigation ul li {
  position: absolute;
  display: block;
}

.home .main-navigation ul li:nth-child(1) { left: 0;}
.home .main-navigation ul li:nth-child(2) { left: 25%;}
.home .main-navigation ul li:nth-child(3) { left: 50%;}
.home .main-navigation ul li:nth-child(4) { left: 75%;}

这只是一个起点,您必须编写更多CSS才能正确显示具有绝对定位的元素.