Why doesn't the input[type=range] work after CSS3 transform?

Question

Must use the JSFiddle on iOS to see issue :)

Developing an iOS web app, and have multi panels which are translated -480px on click (by adding a class with JQuery).

When I use -webkit-transform: translate: (480px,0); on the first navigation button, everything is fine except the input[type=range] becomes unresponsive.

I originally had this: http://jsfiddle.net/b4ung/2/

And later I added -webkit-perspective: 1; to the body. This fixed on Safari but not on iOS : http://jsfiddle.net/RLywz/2/embedded/result/

Can someone please tell me how to get the range function to work on iOS, and why it doesn't register after the translation?

---

Just for further note, if I change the transform to "left: -480px" the range works, but then becomes blocky when animating.

Any light would be tops, as its quite annoying (and if its a bug can someone file it 'cause I'm not a developer)

---

Edited to make the problem more clear, and show updated JSFiddle

Answer 1

I had the same problem, and I was able to hack it by setting the panel's css property to translate(0,0) when it needs to have the range working. In order to have the animation/position right, I wrapped the element with a div and set the x position as needed and shifted the panel's translate property when the range doesn't need to be active. Hope it works in your structure.