14

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

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

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

4

8 回答 8

8

除了已经提到的（或不）触发硬件加速的 CSS 属性的变化之外，我注意到 iOS6 上的另一个变化并没有在 iOS5 上持续存在（或者至少我之前没有真正注意到它） ：硬件加速元素和非加速元素会减慢渲染和应用程序的速度。

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

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

于 2012-09-30T13:58:28.103 回答
5

如果您使用 3D 变换（例如-webkit-transform: translateZ(0)），UIWebView 仍然会进行硬件加速。如果您只使用-webkit-transform-style: preserve-3d.

如果您有一个示例正在执行 3D 转换，但在 iOS 6 中变慢了，您应该在Apple 的 Bug Reporter上报告它。

于 2012-09-22T02:41:16.247 回答
3

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

现在，这些元素似乎正在被硬件加速，但苹果的低级管道中存在一个会降低性能的错误。我们已经尝试了许多硬件加速的变通方法，而且似乎任何在 iOS5.1 上调用 GPU 的东西都会导致 iOS6 上的大幅减速。

我很想找到一个修复程序，因为我们正在构建的应用程序在很大程度上依赖于它的正常工作。如果有人可以指出此示例中的错误，那也将不胜感激。

编辑：即使您如下修改 animate 函数，该错误仍然存​​在。

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>
于 2012-09-24T19:48:27.757 回答
2

尝试替换所有实例-webkit-transform: translate3d(0,0,0);

和

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

它确实对我有用

于 2012-10-15T11:27:59.133 回答
1

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

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

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

于 2012-09-22T15:48:45.397 回答
0

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

于 2012-09-24T12:38:28.253 回答
0

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

于 2012-09-24T17:55:43.517 回答
0

只是让一些人知道，如果与硬件加速转换（如 translateZ(0)）一起使用，-webkit-transform-origin 以前是硬件加速的，但现在不再是。

于 2012-09-26T18:01:36.273 回答