Question

我在iOS6 UIWebView组件中的滚动性能有问题。但在iOS5中，滚动非常流畅。所以我在网上搜索了一下，发现了这个（iOS6 beta更新日志的一部分）。

WebKit不再总是使用-webkit-transform：preserve-3d选项为元素创建硬件加速层。作者应该停止使用此选项作为获得硬件加速的方法。

这可能是原因，因为我的应用程序显示的html网站使用了大量的css3转换。请有人提供解决方案或建议如何强制webview切换回加速渲染模型？

Answer 1

除了已经提到过的（也没有）触发硬件加速的CSS属性的改变之外，我注意到iOS6上的另一个变化并没有像iOS5那样持续存在（或者至少我之前没有注意到）： 硬件加速元素和非加速元素之间的重叠会降低渲染速度和应用程序的速度。

如果加速和非加速元素之间有任何重叠，请确保将硬件加速添加到其他元素，即使它们没有动画也是如此，因为它们将被重新渲染，这将完全压制或者在某些情况下恢复加速效果。

如果您想查看一下，我还写了一篇关于此的简短文章： http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Answer 2

如果您使用3D变换（例如-webkit-transform: translateZ(0)），UIWebView仍会执行硬件加速。如果您仅使用-webkit-transform-style: preserve-3d，则不再适用。

如果您有一个进行3D变换的示例，但在iOS 6中速度较慢，则应在Apple's Bug Reporter报告。

Answer 3

我附上了一个简单的测试用例，它在iOS6中重现了这个错误，并且在iOS5.1上运行得非常好（在iPhone 4和4S上）。 iOS Chrome应用程序是运行此测试的好地方，因为它嵌入了UIWebView。我有一个视频，一旦它上传了两个iPhone 4（运行iOS 5.1的顶部，另一个运行iOS 6），在PhoneGap 2.0 UIWebView中运行这个示例脚本，我将附加。

目前，似乎这些元素都是硬件加速，但Apple的低级管道中存在一个导致性能下降的错误。我们已经尝试了一些硬件加速的变通方法，看来在iOS5.1上调用GPU的任何东西都会导致iOS6大幅减速。

我很乐意找到一个修复程序，因为我们正在构建的应用程序非常依赖于此工作正常。如果有人可以在这个例子中指出错误，那也非常感激。

编辑：即使您按如下方式修改动画功能，该错误仍然存在。

function animate(node) {
    node.style.webkitAnimation = 'sample 5s infinite';
    node.style.webkitPerspective = 1000;
    node.style.webkitBackfaceVisibility = 'hidden';
}

这似乎强调了调用GPU导致这种放缓。

编辑2：在http://bvgam.es/apple/托管的另一个示例在iOS 5.1上流畅运行，在iOS 6上获得1-2 FPS。

<!DOCTYPE html>
<html>
    <head>
        <title>Animation Playground</title>
        <style>
            @-webkit-keyframes sample {
                0% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
                10% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; }
                20% { -webkit-transform: translate3d(10px, 0px, 0px); opacity: 1; }
                40% { -webkit-transform: translate3d(10px, 10px, 0px); opacity: 0; }
                50% { -webkit-transform: translate3d(10px, 20px, 0px); opacity: 1; }
                80% { -webkit-transform: translate3d(20px, 20px, 0px); opacity: 0; }
                100% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
            }
        </style>
        <script type="text/javascript">
            function fib(node, a, b) {
                node.innerHTML = a;
                setTimeout(function() {
                    fib(node, a + b, b);
                }, 0);
            }

            function animate(node) {
                node.style.webkitAnimation = 'sample 5s infinite';
            }

            function createNode(row, column) {
                var node = document.createElement('div');
                node.style.width = '7px';
                node.style.height = '7px';
                node.style.position = 'absolute';
                node.style.top = 30 + (row * 9) + 'px';
                node.style.left = (column * 9) + 'px';
                node.style.background = 'green';
                return node;
            }

            function run() {
                for (var row = 0; row < 20; ++row) {
                    for (var column = 0; column < 20; ++column) {
                        var node = createNode(row, column);
                        document.body.appendChild(node);
                        animate(node);
                    }
                }

                var output = document.getElementById('output');
                fib(output, 0, 1);
            }
        </script>
    </head>
    <body onload="run()">
        <div id="output" style="font-size: 40px; position: absolute; left: 220px;"></div>
    </body>
</html>

Answer 4

尝试替换-webkit-transform: translate3d(0,0,0);

的所有实例

使用

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);

它确实对我有用

Answer 5

在iOS 6中，CSS转换确实要慢得多，至少在iPhone 4的应用程序中是这样。

我将基本的translate（）设置为element而不是translate3d（），并且性能保持不变，所以我认为即使translate3d（）也不再触发GPU加速。这听起来像个错误。

作为一种解决方法，我尝试在元素上设置不同的CSS属性（如rotate3d（），scale3d（），perspective，...），但它们似乎都没有触发硬件加速。

Answer 6

尝试用-webkit-transform: translate3d(0,0,0);替换-webkit-perspective: 1000; -webkit-backface-visibility: hidden;的所有实例。这对我有用。似乎-webkit-transform: translate3d(0,0,0);不再调用硬件加速。

Answer 7

那些报告-webkit-transform：translate3d（0,0,0）;在iOS 6中速度较慢，请提供一些显示此内容的示例内容的URL。

Answer 8

只是为了让一些人知道，-webkit-transform-origin如果与硬件加速转换（如translateZ（0）一起使用）之前是硬件加速的，但它不再是。

iOS6 UIwebView CSS3D转换不是硬件加速

8 个答案: