logo标签列表

iOS6 UIWebView中的CSS3D转换未进行硬件加速。

ioscssios6hardware-acceleration
14

在iOS6的UIWebView组件中，我遇到了滚动性能差的问题。虽然在iOS5中，滚动非常流畅。因此，我上网搜索了一下，并找到了这篇iOS6 beta更改日志的一部分。

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

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

8个回答
8
除了已经提到的触发硬件加速的CSS属性的更改（或未更改）之外，我注意到iOS6上的另一个变化没有像iOS5那样持久存在（或者至少在此之前我没有真正注意到它）： 硬件加速元素与非加速元素之间的重叠会严重减缓渲染和应用程序的运行速度。 如果加速和非加速元素之间有任何重叠，请确保为这些其他元素添加硬件加速，即使它们没有进行动画等操作，因为它们也将被重新渲染，这将完全压制或在某些情况下逆转加速效果。
如果您想查看有关此内容的简短文章，请访问以下链接： http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
5

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

如果您有一个使用3D变换的示例，在iOS 6上变慢了，请在Apple的错误报告工具中报告此问题。

谢谢。实际上这不是我的代码，而是第三方库。我会查看它的代码如何工作，并联系他们或苹果。 - simekadam
2
请问我在哪里可以找到特定的CSS属性是否被加速了？ - simekadam
3
我在iOS6中复制了一个简单的测试用例，这个bug可以被重现，并且在iPhone4和4S上的iOS5.1运行完美。由于它内嵌了UIWebView，所以iOS Chrome应用是运行此测试的好地方。我有一个视频，一旦上传完成，我将附上两部iPhone 4的视频（其中一个运行iOS5.1，另一个运行iOS6），在PhoneGap2.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>
2

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

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

这对我有效

1

CSS变换在iOS 6上确实比较慢，至少在我的iPhone 4应用程序中是这样。

我将基本的translate()设置为元素，而不是translate3d()，性能保持不变，所以我认为即使是translate3d()也不再触发GPU加速。这听起来像是一个bug。

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

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

那些报告说在iOS 6中-webkit-transform: translate3d(0,0,0);速度较慢的人，请提供一个URL以展示这一点。

0
只是想让一些人知道，-webkit-transform-origin以前与硬件加速的变换一起使用时（例如translateZ（0）），它也会被硬件加速，但现在不再这样了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接