iOS6 CSS3 3D转换速度非常慢

编辑：这个问题将在两天内允许我这样做时获得500点声望的奖励。如果在此期间得到答复，则第一个发布的修复程序的作者将尽快获得声望。iOS6 CSS3 3D转换速度非常慢

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

现在看来，这些元素似乎正在硬件加速，但苹果的低层管道存在一个杀死性能的bug。我已经尝试了一些硬件加速的解决方法，并且似乎在iOS5.1上调用GPU的任何内容都会导致iOS6上的大幅减速。

即使修改动画功能，该错误仍然存在，如下所示。

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>

来源

2012-09-24 eplawless

http://cssdeck.com/labs/full/bchlgewv/0我没有看到iOS 5.1和6之间的任何区别。 – mddw

并排留下两个设备并观看柜台; iOS 5.1轻而易举地超过iOS 6. – eplawless

当发出translate3d魔法调用时，iOS6不再自动加速内容。一些恳求者建议requestAnimationFrame将调用必要的代理并安抚iOS的强大和不可知的恶魔 - 可能在牺牲一只小山羊之后（它必须没有缺陷）。其他人则建议增加一种内联风格以获得透视和背面可见性。

来源

2012-09-25 04:27:10

LOL！ PITA可能不会批准。 – justspamjustin

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}

但这DOES工作：

.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-26 15:30:36 thv20

切勿混用左/顶的定位与翻译（）或translate3d（） - 这将是可怕的慢即使在台式电脑上也可能导致放缓

来源

2012-10-04 07:28:56 olsn

iOS6 CSS3 3D转换速度非常慢

回答

相关问题