CSS3动画变换在Safari / UIWebView中不会呈现这么好 [英] CSS3 Transform Animation doesn't render so well in Safari/UIWebView

问题描述

我正在开发用于移动/触摸设备部署的HTML5应用程序和正在使用的PhoneGap，只针对iOS平台的时刻（Webkit内核）。

I'm developing an HTML5 app for mobile/touch device deployment and are utilising PhoneGap and only targeting the iOS platform for the moment (Webkit).

与CSS3过渡发生时我的问题（和它发生在常规jQuery的动画以及）在Webkit内核往往会做一些奇怪的事情。例如，在现有的code查看这里（的 http://jsfiddle.net/lvl99/dSjcj/ 当您步入通过网页，序列中要回（），即从第5页1）将渲染动画正常，但是走上前（即从第1页到5）会产生渲染不一致，主要是丑陋的一面（记得在Safari中查看它。我一直在使用Safari 5.1.7）。

My issue occurs with the CSS3 transitions (and it happens to regular jQuery animations as well) in that Webkit tends to do some strange things. For instance, in the code available to view here (http://jsfiddle.net/lvl99/dSjcj/) when you step through the pages, going back in the sequence (i.e. from page 5 to 1) will render the animation fine, however stepping forward (i.e. from page 1 to 5) will produce inconsistent rendering, mostly on the side of ugly (remember to view it in Safari. I've been using Safari 5.1.7).

我最初开发使用jQuery Mobile框架，但我使用的主要功能是通过井号标签和转换路由的页面，但因为我有这些问题的过渡，我想开发一个简单的解决方案，以避免任何JS /用CSS JQM冲突。唉，可能是我已经上来的错误实际上是Safari浏览器/ WebKit的关系。

I was originally developing using the jQuery Mobile framework, but the key functionality that I was using was the page routing through hashtags and the transitions, but since I had these issues with the transitions, I tried developing a simpler solution to avoid any JS/CSS conflicts with jQM. Alas, it's possible that the errors I've been coming up are actually Safari/Webkit related.

我最初使用 jQuery.animate（）左侧财产，现在用CSS3 变换类似于技术做事的方式JQM，还帮的速度和测试它是否会更愿意正确呈现。双方都没有奏效不同unworkingness的程度。

I originally used jQuery.animate() on the left property, to now using CSS3 transform technique similar to the jQM way of doing things, also to help with speed and test whether it would be more willing to render properly. Both haven't worked to varying degrees of unworkingness.

幸运的是，Firefox的渲染一切正常。它有没有问题，但是Firefox是不是目标平台，当项目在PhoneGap的环境X $ C $内c编译后，前presses相同的问题，Safari一直用它。当我还是用JQM与早期开发版本，Safari浏览器将使其罚款（包括Safari在iPad模拟器），但是一个UIWebView不会。这让我觉得，也许这是一个硝基JS引擎的问题（如，也许UIWebView中没有足够的速度/功率/性能呈现过渡正确 - 我已经尝试所有的动画转移到CSS3贬谪渲染操作到GPU）。

Fortunately, Firefox renders everything fine. It has no problems, however Firefox isn't the target platform and when the project is compiled within Xcode in the PhoneGap environment, it expresses the same problems that Safari has with it. When I was still using jQM with an earlier development version, Safari would render it fine (including Safari on the iPad Simulator), however UIWebView wouldn't. This made me think that perhaps it was a Nitro JS engine issue (as in, perhaps UIWebView didn't have the speed/power/capability to render the transition properly -- I've attempted to transfer all animations to CSS3 to relegate the rendering operations to the GPU).

我使用各种插件如 jQuery的交通，的 jQuery的动画增强和 TransformJS 。我也试过编码内JQM自己的自定义转换处理程序，并没有正确地呈现（尽管它来到最靠近：在Firefox和Safari的工作，只是没有在一个UIWebView）

I've used various plugins like jQuery Transit, jQuery Animate Enhanced, and TransformJS. I also tried coding my own custom transition handler within jQM and it didn't render properly (although it came the closest: worked in Firefox and Safari, just not in UIWebView).

我已经就过渡与不同类型的内容过于元素不一致的结果：视频，图像，浮动元素，多个段落都是我测试过。有在某一阶段与从该序列（即1和5），但现在我的问题就是这样升序页面转换（即，1至5）。

I've had inconsistent results regarding transitioning elements with different types of content too: video, images, floated elements, multiple paragraphs are all I've tested. There was at some stage too issues with transitioning to/from the extreme ends of the sequence (i.e. 1 and 5), but now my issue is just that ascending page transition (i.e. 1 to 5).

我花了一些关于这几天，试图解决这个看似很小的问题，但它是相当完整的具有幻灯片切换这样的基础上，用户通过应用程序的移动方向这是情境的用户体验。最简单的办法是只删除的过渡，但如果有一些方法来准确理解的Webkit / UIWebView的是有麻烦的东西，为它创建一些解决方案。这无疑涉及到闪烁问题JQM经验与过渡了。很多CSS修复那些人的建议在网络上也不能工作，如 -webkit-背面能见度：隐藏键，设置默认转换属性 -webkit-变换：rotateX（0）

I've spent a number of days on this, trying to address this seemingly small issue, but it's quite integral to the user experience having slide transitions like this which are contextual based on the direction the user is moving through the app. The easiest solution is to just remove the transitions, but if there's some way to understand what exactly Webkit/UIWebView is having trouble with, to create some solution for it. It's no doubt related to the flicker issue jQM experiences with transitions too. A lot of the CSS fixes for those people suggested on the web didn't work either, such as -webkit-backface-visibility: hidden and setting a default transform property -webkit-transform: rotateX(0).

推荐答案

看起来问题是，它不是动画从右边的下一个项目（向上移动时1-> 2-> N），而是仅仅。显示（）ING它时，previous项目做动画了。

It looks like the problem is that it's not animating the next item from the right (when moving up 1->2->n) but rather just '.show()'ing it when the previous item is done animating out.

给我一个秒以逐步的.js

Gimme a sec to step through the .js

...

<击>好吧，我想我知道它是什么，它​​做的是，当它的移动从右到左（数字了），你不能看到新的页面（高数）从左边进来由于左是从100％移动 - > 0％，因为较小的数目正在移出

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

Ok, I think that's wrong...

如果你改变了 100％到 92.5％在 @ - webkit-关键帧slideinleft 和 @ - MOZ关键帧slideinleft 声明，那么它应该为你工作，可惜我不能告诉你到底为什么，因为我们（工作）避免CSS转换为我们做了很多的工作，企业等仍然需要支持IE7 +，有时甚至6：（

If you change the 100% to 92.5% in the @-webkit-keyframes slideinleft and @-moz-keyframes slideinleft declarations then it should work for you, unfortunately I can't tell you why exactly as we (work) avoid CSS transformations as we do a lot of corporate work and so still need to support IE7+ and sometimes even 6 :(

请注意，你可以尝试比 92.5％我只是想找到适合你（工作 95％，最低的明智以外的值没有工作）

Note that you can try a value other than 92.5% I just wanted to find the lowest sensible value that worked for you (95% didn't work)

这篇关于CSS3动画变换在Safari / UIWebView中不会呈现这么好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！