javascript - CSS3 变换动画在 Safari/UIWebView 中的渲染效果不佳

Question

我正在开发用于移动/触摸设备部署的 HTML5 应用程序，并且正在使用 PhoneGap，目前仅针对 iOS 平台 (Webkit)。

我的问题出现在 CSS3 转换(它也发生在常规 jQuery 动画中)，因为 Webkit 倾向于做一些奇怪的事情。例如，在代码中可以查看 here ( http://jsfiddle.net/lvl99/dSjcj/ ) 当您单步浏览页面时，按顺序返回(即从第 5 页到第 1 页)将渲染动画效果很好，但是向前(即从第 1 页到第 5 页)将产生不一致的渲染，主要是在丑陋的一面(记得在Safari中查看。我一直在使用Safari 5.1.7)。

我最初是使用 jQuery Mobile 框架进行开发的，但我使用的关键功能是通过主题标签和转换进行页面路由，但由于我在转换方面遇到了这些问题，我尝试开发一个更简单的解决方案来避免任何JS/CSS 与 jQM 冲突。 las，我遇到的错误实际上可能与 Safari/Webkit 相关。

我最初在左侧属性上使用 jQuery.animate()，现在使用类似于 jQM 做事方式的 CSS3 transform 技术，也有助于提高速度并测试它是否更愿意正确渲染。两者都没有不同程度的不工作。

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

我使用过各种插件，例如 jQuery Transit , jQuery Animate Enhanced , 和 TransformJS .我还尝试在 jQM 中编写我自己的自定义转换处理程序，但它没有正确呈现(尽管它最接近:在 Firefox 和 Safari 中工作，只是不在 UIWebView 中)。

对于具有不同类型内容的过渡元素，我也得到了不一致的结果:视频、图像、 float 元素、多个段落都是我测试过的。在某些阶段，从序列的末端(即 1 和 5)过渡到/从末端过渡也存在问题，但现在我的问题只是页面上升过渡(即 1 到 5)。

我在这方面花了好几天时间，试图解决这个看似很小的问题，但它对于用户体验来说是不可或缺的，像这样的幻灯片过渡是基于用户在应用程序中移动的方向的上下文。最简单的解决方案是只删除过渡，但如果有某种方法可以了解 Webkit/UIWebView 究竟遇到了什么问题，那么就可以为它创建一些解决方案。毫无疑问，这也与 jQM 在转换时遇到的闪烁问题有关。网上为那些人建议的许多 CSS 修复也不起作用，例如 -webkit-backface-visibility: hidden 和设置默认转换属性 -webkit-transform:旋转 X(0)。

Answer 1

看起来问题在于它不是从右边开始对下一个元素进行动画处理(当向上移动 1->2->n 时)，而只是在前一个元素完成动画后“.show()”它.

给我一​​点时间来单步执行 .js

...

好吧，我想我知道它是什么，它在做什么，当它从右向左移动(数字向上)时，您看不到从左侧进入的新页面(更大的数字) ，因为“左”从 100% -> 0% 移动，因为较小的数字正在向外移动。

好吧，我认为这是错误的......

如果在 @-webkit-keyframes slideinleft 和 @-moz-keyframes 中将 100% 更改为 92.5% slideinleft 声明那么它应该适合你，不幸的是我不能告诉你为什么我们(工作)避免 CSS 转换，因为我们做了很多公司工作，所以仍然需要支持 IE7+，有时甚至是 6: (

请注意，您可以尝试 92.5% 以外的值我只是想找到适合您的最低合理值(95% 无效)