2

编辑：这个问题将在我被允许这样做的两天内获得 500 声望的赏金。如果在此期间得到答复，第一个发布修复的作者将尽快获得声誉。

与 iOS5.1 相比，iOS6 似乎非常糟糕地破坏了 CSS3 转换的性能。如果您可以提供一个修复程序，使以下示例在 iOS6 上的性能恢复到与 iOS5.1 相当的水平，而不失一般性，您可以拥有一堆我来之不易的声誉。该示例在 iOS5.1 上运行良好（在 iPhone 4 和 4S 上）。iOS Chrome 应用程序是运行此测试的好地方，因为它嵌入了 UIWebView。

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

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

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

请帮助我对抗 iOS6 的暴政并发布我现在严重损坏的应用程序。

<!DOCTYPE html>
<html>
    <head>
        <title>Animation Playground</title>
        <style>
            @-webkit-keyframes sample {
                0% { -webkit-transform: translate3d(0px, 0px, 0px); }
                10% { -webkit-transform: translate3d(0px, 0px, 0px); }
                20% { -webkit-transform: translate3d(10px, 0px, 0px); }
                40% { -webkit-transform: translate3d(10px, 10px, 0px); }
                50% { -webkit-transform: translate3d(10px, 20px, 0px); }
                80% { -webkit-transform: translate3d(20px, 20px, 0px); }
                100% { -webkit-transform: translate3d(0px, 0px, 0px); }
            }
        </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>
4

3 回答 3

2

发出 translate3d 魔术调用时，iOS6 不再自动 GPU 加速内容。一些请求者建议 requestAnimationFrame 将调用必要的调解者并安抚强大且不可知的 iOS 恶魔 - 可能在牺牲一只小山羊（必须没有瑕疵）之后。其他人建议为透视和背面可见性添加内联样式。

于 2012-09-25T04:27:10.777 回答
2

iOS 6 需要一组不同的 CSS 规则来触发硬件加速。

试试这个：

-webkit-transform: translate(0,0) translateZ(0);



编辑： 我实际上发现它translate3d()仍然有效，只要值作为过渡的一部分发生变化。所以，这不起作用：

.element.position   {-webkit-transition: left 1s ease; 
                     -webkit-transform: translate3d(0,0,0)}    
.element.position-a {left: 0}
.element.position-b {left:500px}

但这确实有效：

.element.position   {-webkit-transition: all 1s ease}    
.element.position-a {-webkit-transform: translate3d(0,0,0)}
.element.position-b {-webkit-transform: translate3d(500px,0,0)}
于 2012-09-26T15:30:36.993 回答
0

切勿将左/上定位与 translate() 或 translate3d() 混合 - 即使在台式计算机上，这也会非常慢，可能会导致速度变慢

于 2012-10-04T07:28:56.220 回答