html - Chrome CSS 3 Transition Not Smooth

Question

Hi working on a site design for a new site and the homepage has some flyup menus using CSS3 transitions.

If you go to --------- and take a look at the "Some Menu that is nice", "Another Cool Menu", etc. links on the homepage in chrome, when you mouse over them the flyups appear but the transition is not smooth and the menu label appears like it is vibrating up and down. I included the CSS below but it is available in the style.css file on the site (relevant parts start on line 1905)

This is only in chrome, Safari and Firefox work fine and IE... well lets not talk about that right now....

.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

You are causing browser reflows, which are expensive and change the layout on each animation step, causing the jerkyness and jitterness.

To work around this, you need to apply absolute positioning to your animated elements, adding this to your CSS will get you started:

.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%;}

This is just a starting point, you will have to write more CSS in order to correctly display your elements with absolute positioning.