为什么CSS3转换后输入[type = range]不起作用?

时间:2012-05-08 10:27:12

标签: ios css3 input mobile-safari transform

必须使用iOS上的JSFiddle查看问题:)

开发一个iOS网络应用程序,并有多个面板,点击后翻译-480px(通过添加一个带有JQuery的类)。

当我在第一个导航按钮上使用-webkit-transform: translate: (480px,0);时,除了输入[type = range]没有响应之外,一切都很好。

我最初有这个:http://jsfiddle.net/b4ung/2/

后来我向身体添加了-webkit-perspective: 1;。这已在Safari上修复,但在 iOS 上的 http://jsfiddle.net/RLywz/2/embedded/result/

有人可以告诉我如何让范围功能在iOS上运行,以及为什么它在翻译后没有注册?


只是为了进一步说明,如果我将变换更改为" left:-480px"该范围有效,但在制作动画时会变得模糊。

任何光线都会是顶部,因为它非常令人讨厌(如果它有人提出错误,那么因为我不是开发人员)


编辑以使问题更加清晰,并显示更新的JSFiddle

1 个答案:

答案 0 :(得分:1)

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