iPad 1 上不稳定/故障 CSS3 转换问题（举例）？
随着这个项目的开展，我们必须制作 iPad HTML5。使用 Backbone 和 jQuery Mobile，我们以为我们会取得胜利，但 jQuery Mobile 似乎造成了比应有的更多问题。使用 jQuery Mobile 进行页面转换之类的操作非常缓慢、不稳定且容易出问题（我确实知道它仍处于 Alpha 阶段）。
根据我们的需求，我们确实需要一种在页面之间平滑过渡的方式。我开始做一些实验，看看是否可以让它们更好地定制解决方案。我觉得我已经很接近了，但动画仍然显得不稳定和故障。我想知道是否还有其他方法可以解决这个问题？或者是否有大量信息可以帮助让这个坚如磐石？
我使用translateX()/translateY() CSS3（硬件加速）转换来确保它获得最佳性能，但它的性能似乎仍然不可靠。有时可以，有时不行。
我已经上传了一个示例...请注意，这仅在 Chrome/Safari（看起来不错）和 iPad 第一代上的 Mobile Safari（看起来不稳定）中进行了测试。如果您手头有 iPad，请看一下这个示例...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
它是作为一个基本插件制作的，因为一旦我确定了这个插件，我想进一步开发它。
谁能帮忙解决这个问题吗？我只是想知道为什么在 iPad 上还是不稳定？
更新：我尝试使用translate3d()以及translateX和translateY()，没有什么区别。
With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it's still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I'm quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I'm using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it's performance. Sometimes it's ok, sometimes it's not.
I have uploaded an example... Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It's made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it's still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
iPad 上只有 3 维变换是硬件加速的。您应该使用translate3d 并提供第三个参数，设置为零。
http://googlecode.blogspot.com/2010/08 /css3-transitions-and-transforms-in.html
Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html