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 t

Answer 1

First of all, I have to say that the menu looks slick. I could use that for a project. What WP theme are you using? It is awesome!

On a serious note, it seems as though the CSS animations are just causing a bug when Chrome renders them. I have two solutions for you (both of them would require some work):

1. Use animate.css to see if the prebuilt CSS animations are made better and are stable on Chrome. http://daneden.me/animate/

2. Animate the menu with jQuery, which would also be a stable solution.

Answer 2

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.