Google Chrome中确实很奇怪的渲染行为

Question

I was playing a little bit with JavaScript and jQuery and I noticed something wrong in Google Chrome but not in Mozilla Firefox. The problem is that ALL the inputs update correctly except the one with the Opacity label.

It gets updated in a strange way like when I focus in or focus out or when I click five or six times.

Here's the FIDDLE . (use the arrows in each input to change value)

Why Google Chrome renders the Bad Input number field like that and the other fields not?

If you don't get any strange behavior it seems it's from my machine (Linux Mint 17), but don't now for sure.

EDIT:

I'm expecting the inputs to increment/decrement instantly when you click the arrows.For some inputs works and for others the update is delayed or something.

Answer 1

Reproduced, using Mac OS Mavericks and the latest Chrome / Firefox.

For some reason it breaks with the -webkit-filter rule in the .colorPicker styles. You can replace it with a box-shadow, and it works OK, and looks the same:

.panel, color .colorPicker {
...
  /*-webkit-filter: drop-shadow(0 0 3px black);*/
  box-shadow: 0 0 3px black;
...
}

http://jsfiddle.net/w9S7Y/52/

...but exactly why remains a mystery! As Vivek points out in the comments above, in the fiddle in the orig post, you can also force the inout to redraw by resizing the window. So for some reason the Blink repaint process is getting blocked by the -webkit-filter.

Currently reading through Blink bugs...