A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging.
The select element in question has a pulsating drop shadow glow effect. You can find the demo link and code below. When using Chrome (version 26) on Windows, the select element does glow, but whenever the user clicks on the menu, it resets its selection to the first option every second or less, making it impossible to scroll and choose the correct option. The select menu contains 73 options.
Is there any workaround for this issue? The same behavior occurs when applying the animation to a parent element containing the select menu.
Demo link: http://jsfiddle.net/P72u7/1/
CSS:
.glow {
-webkit-animation-name: promptGlow;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
animation-name: promptGlow;
animation-duration: 7s;
animation-iteration-count: infinite;
}
@-webkit-keyframes promptGlow {
from {
box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
}
50% {
box-shadow: 0 0 40px rgba(51, 51, 51, 0.44);
}
to {
box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
}
}
HTML:
<select class="glow">
<option value="1" selected="">Abraham Moss</option>
<option value="2">Altrincham</option>
<option value="3">Anchorage</option>
<option value="4">Ashton Moss</option>
<option value="73">Woodlands Road</option>
</select>