Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Select List/Drop Down hover jumping with CSS3 Animations in Chrome

Select List/Drop Down Hover Jumping With CSS3 Animations In Chrome

Select List/Drop Down hover jumping with CSS3 Animations in Chrome

Problem

Perhaps I should log this as a bug with Chrome, but I thought I'd check here to see if there are any solutions to the problem.

I have a simple Select list with an animation on the parent div background using CSS3. When I open the drop down list and move the mouse over different options, the blue bar (the hover), jumps around as I move my mouse around especially on the last item in the list.

HTML:

CSS:

#backgroundContainer {
background-repeat: no-repeat;
background-color: #CCC;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png");
color: #fff;
height:500px;
width:100%;
-webkit-animation: moveUpDown 240s infinite linear;
}
@keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}
@-webkit-keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}

I created a jsFiddle here: http://jsfiddle.net/ZfQU5/ that uses the code above.

Please take a look and see if I am doing something wrong or if there are any workarounds. Of course I can just remove the background animation, but still odd that it jumps around regardless.

Thanks,

Problem courtesy of: Mike

Solution

Mike,

Yes, the entire page jumps on Chrome, and in the Chrome dev also, not just the drop down menu. It's not a bug, your markup is wrong. It doesn't jump in IE because IE doesn't understand keyframes, or -webkit-keyframes, yet. That's where the jump is coming from. You have the menu nested inside the tags, so the menu picks up the jump. I have tested it on the Chrome with and without dev turned on, IE9, FF, and later I'll run IE10, and Opera just to see how they react to this coding, but I'm sure it will be the same.

My questions are:

  1. What animation are you try to achieve?
  2. Do you want the action to fire from one of the drop down choices?
  3. Do you intend to have two documents? One .html and one .css or just drop all the code in the .html and have one file?

I fixed all the code and have it working to what I think you were trying to do, but that's assuming I did what you wanted.

Jason,

Solution courtesy of: Jason

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Select List/Drop Down hover jumping with CSS3 Animations in Chrome

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×