Javascript CSS3变换动画不'；在Safari/UIWebView中渲染不太好

我正在开发一个用于移动/触摸设备部署的HTML5应用程序，并利用PhoneGap，目前仅针对iOS平台（Webkit）

我的问题发生在CSS3转换上（也发生在常规的jQuery动画上），因为Webkit倾向于做一些奇怪的事情。例如，在可用于查看（）的代码中，当您单步浏览页面时，按顺序返回（即从第5页到第1页）将渲染动画效果良好，但是向前移动（即从第1页到第5页）将产生不一致的渲染效果，主要是在丑陋的一侧（请记住在Safari中查看。我一直在使用Safari 5.1.7）

我最初是使用jQuery移动框架进行开发的，但我使用的关键功能是通过hashtags和转换进行页面路由，但由于转换存在这些问题，我尝试开发一个更简单的解决方案，以避免与jQM发生任何JS/CSS冲突。唉，我刚才提到的错误可能与Safari/Webkit有关

我最初在左边的属性上使用了

jQuery.animate（）

，现在使用CSS3

transform

技术，类似于jQM的处理方式，也可以帮助提高速度并测试它是否更愿意正确渲染。两者都没有工作到不同程度的不可行

幸运的是，Firefox使一切正常。它没有问题，但是Firefox不是目标平台，当项目在PhoneGap环境的Xcode中编译时，它表达了与Safari相同的问题。当我还在早期开发版本中使用jQM时，Safari会让它很好（包括iPad模拟器上的Safari），但UIWebView不会。这让我觉得这可能是Nitro JS引擎的问题（比如，也许UIWebView没有正确渲染转换的速度/功率/能力——我尝试将所有动画传输到CSS3，以将渲染操作降级到GPU）

我使用了各种插件，比如，和。我还尝试在jQM中编写我自己的自定义转换处理程序，但没有正确呈现（尽管它是最接近的：在Firefox和Safari中工作，而不是在UIWebView中）

对于不同内容类型的元素转换，我也有不一致的结果：视频、图像、浮动元素、多个段落都是我测试过的。在某些阶段，从序列的最末端（即1和5）过渡到/从最末端过渡也有问题，但现在我的问题只是升序页面过渡（即1到5）

---

我花了好几天的时间在这上面，试图解决这个看似很小的问题，但它对于用户体验来说是不可或缺的，有这样的幻灯片过渡，它是基于用户在应用程序中移动的方向的上下文。最简单的解决方案是删除转换，但是如果有某种方法可以理解Webkit/UIWebView到底遇到了什么问题，那么就为它创建一些解决方案。毫无疑问，这与jQM在转换过程中遇到的闪烁问题有关。在web上为这些人建议的许多CSS修复也不起作用，例如

-webkit backface visibility:hidden

和设置默认转换属性

-webkit transform:rotateX（0）

问题似乎是它没有从右侧设置下一项的动画（向上移动1->2->n时）而是在上一个项目完成动画制作后，对其进行“.show（）”处理

请给我一点时间，让我逐步了解.js

...

好的，我想我知道它是什么，它所做的是，当它从右向左（数字向上）移动时，你看不到新的页面（更高的数字）从左边进入，因为“左”从100%移动->0%，因为较小的数字正在移出

好吧，我想那是错的

如果您将

@-webkit keyframes slideinleft

和

@-moz keyframes slideinleft

声明中的

100%

更改为

92.5%

，那么它应该适合您，不幸的是，我无法告诉您为什么与我们（工作）完全相同避免CSS转换，因为我们做了大量的公司工作，因此仍然需要支持IE7+，有时甚至是IE6：(

---

请注意，您可以尝试除

92.5%

之外的其他值。我只是想找到对您有效的最低合理值（

95%

不起作用）

Genius。它起作用了。它对我来说没有意义，但它起作用了。谢谢您，善良的先生。如果我弄清楚为什么要更新它，我很高兴能提供帮助：）