Databases
StackOverflow2013
Postsdbo
POSelect List/Drop Down hover jumping with CSS3 Animations in Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSelect List/Drop Down hover jumping with CSS3 Animations in Chrome
    text
    copied!<p>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. </p> <p>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. </p> <p>HTML:</p> <pre><code>&lt;div id="backgroundContainer"&gt; &lt;select &gt; &lt;option value=""&gt;-- Select a Test Case --&lt;/option&gt; &lt;option value="1"&gt;Test1&lt;/option&gt; &lt;option value="2"&gt;Test2&lt;/option&gt; &lt;option value="3"&gt;Test3&lt;/option&gt; &lt;option value="4"&gt;Test4&lt;/option&gt; &lt;option value="5"&gt;Test5&lt;/option&gt; &lt;option value="6"&gt;Test6&lt;/option&gt; &lt;option value="7"&gt;Test7&lt;/option&gt; &lt;option value="8"&gt;Test8&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#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%; } } </code></pre> <p>I created a jsFiddle here: <a href="http://jsfiddle.net/ZfQU5/" rel="nofollow">http://jsfiddle.net/ZfQU5/</a> that uses the code above.</p> <p>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.</p> <p>Thanks,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload