为什么 CSS3 转换后 input[type=range] 不起作用？答案

【问题标题】：Why doesn't the input[type=range] work after CSS3 transform?为什么 CSS3 转换后 input[type=range] 不起作用？
【发布时间】：2012-05-08 10:27:11
【问题描述】：

必须在 iOS 上使用 JSFiddle 才能看到问题 :)

开发一个 iOS 网络应用程序，并有多个面板，点击时翻译 -480 像素（通过使用 JQuery 添加一个类）。

当我在第一个导航按钮上使用 -webkit-transform: translate: (480px,0); 时，一切都很好，除了 input[type=range] 变得无响应。

我原来有这个：http://jsfiddle.net/b4ung/2/

后来我在正文中添加了-webkit-perspective: 1;。这在 Safari 上已修复，但在 iOS 上没有：http://jsfiddle.net/RLywz/2/embedded/result/

谁能告诉我如何让范围函数在 iOS 上工作，以及为什么它在翻译后没有注册？

为了进一步说明，如果我将变换更改为“左：-480px”，则范围有效，但在制作动画时会变得块状。

任何灯都可以，因为它很烦人（如果它是一个错误，有人可以提交它，因为我不是开发人员）

已编辑以使问题更清晰，并显示更新后的 JSFiddle

【问题讨论】：

似乎对我来说运行完美（至少在 chrome 中）。您能否更具体地了解您的浏览器/操作系统？
滑块在moveY() 之前和之后看起来对我来说很好...... showValue() 函数在哪里？
我可以在 Firefox 中看到问题....将尝试解决它...
是的，它看起来不错，但在 Safari 和 iOS 下，滑块不起作用。 showValue 用于将值写入文档的另一部分。有什么技巧可以让它在 iOS 上运行吗？
diveintohtml5.info/forms.html#type-range可以给你线索

标签： ios css input mobile-safari transform

【解决方案1】：

我遇到了同样的问题，当需要范围工作时，我可以通过将面板的 css 属性设置为 translate(0,0) 来破解它。为了使动画/位置正确，我用 div 包裹元素并根据需要设置 x 位置，并在不需要激活范围时移动面板的 translate 属性。希望它适用于您的结构。

【讨论】：